我正在寻找一种设置按钮大小的方法,无论里面的文本大小如何,因为它们将是不超过 3 个数字的数字
这是一个示例,因此您可以看到我在说什么(也在jsfiddle中):
.table-mesas {
float: left;
width: 95.8%;
}
.table-mesas tr td {
padding: 15px;
}
.butt-mesas {
-webkit-border-radius: 4;
-moz-border-radius: 4;
border-radius: 4px;
text-shadow: 1px 1px 15px #666666;
font-family: Arial;
color: #ffffff;
font-size: 30px;
padding: 30px 40px;
background: #88dd77;
border: solid #000000 1px;
text-decoration: none;
width: 100%;
}
.butt-mesas:hover {
background: #9ae288;
text-shadow: 1px 1px 15px #666666;
text-decoration: none;
}
<table class="table-mesas">
<tr>
<td><button class="butt-mesas">1</button></td>
<td><button class="butt-mesas">2</button></td>
<td><button class="butt-mesas">3</button></td>
<td><button class="butt-mesas">4</button></td>
<td><button class="butt-mesas">5</button></td>
</tr>
<tr>
<td><button class="butt-mesas">100</button></td>
<td><button class="butt-mesas">2</button></td>
<td><button class="butt-mesas">3</button></td>
<td><button class="butt-mesas">4</button></td>
<td><button class="butt-mesas">5</button></td>
</tr>
<tr>
<td><button class="butt-mesas">1</button></td>
<td><button class="butt-mesas">2</button></td>
<td><button class="butt-mesas">3</button></td>
<td><button class="butt-mesas">4</button></td>
<td><button class="butt-mesas">5</button></td>
</tr>
<tr>
<td><button class="butt-mesas">1</button></td>
<td><button class="butt-mesas">2</button></td>
<td><button class="butt-mesas">3</button></td>
<td><button class="butt-mesas">4</button></td>
<td><button class="butt-mesas">5</button></td>
</tr>
<tr>
<td><button class="butt-mesas">1</button></td>
<td><button class="butt-mesas">2</button></td>
<td><button class="butt-mesas">3</button></td>
<td><button class="butt-mesas">4</button></td>
<td><button class="butt-mesas">5</button></td>
</tr>
</table>
您可以尝试设置一个固定的宽度和高度,以及一个等于您设置的高度的“行高”,以便文本垂直显示在中心。此外,还有一个 text-align: center,将文本水平居中。
我希望我有所帮助。一切顺利。