无论是否支持文本/跨浏览器，都要使按钮大小相同

Make Buttons the Same Size regardless of Text / Cross-Browser Support

本文关键字：按钮 支持 是否 文本 浏览器      更新时间：2023-09-26

我创建了一个JSFiddle，其中显示了6个按钮和每个按钮内的文本。我想做的是弄清楚为什么在Chrome上，所有按钮都与最大按钮（文本最多的按钮）的大小匹配，而在其他浏览器上，按钮不匹配，这看起来很好：http://jsfiddle.net/tXS6w/432/

<table class=buttons>
 <tr>
    <td><button type="button">Hello there my name is bob and this is a test  </button>
    <td><button type="button">B</button>
    <td><button type="button">C</button>
    <td><button type="button">D</button>
    <td><button type="button">E</button>
      <td><button type="button">F</button>
</table>

css

.buttons { 
  width: 100%;
  table-layout: fixed;
}
.buttons button { 
  width: 100%;
  height: 100%;
  white-space: normal;
}
一个可能的解决方案是Flexbox 

.buttons {
  width: 100%;
  table-layout: fixed;
}
.buttons tr {
  display: flex;
}
.buttons tr td {
  flex: 1;
  display: flex;
  flex-direction: column;
}
button {
  flex: 1;
}
<table class=buttons>
  <tr>
    <td>
      <button type="button">Hello there my name is bob and this is a test</button>
    </td>
    <td>
      <button type="button">B</button>
    </td>
    <td>
      <button type="button">C</button>
    </td>
    <td>
      <button type="button">D</button>
    </td>
    <td>
      <button type="button">E</button>
    </td>
    <td>
      <button type="button">GF</button>
    </td>
  </tr>
</table>

当通过CSS将宽度设置为百分比时，它将是包含元素大小的百分比。在这种情况下，<td>。由于它们没有定义宽度，因此大小可能是不可预测的。似乎有些浏览器会将单元格大小相等，而另一些浏览器则不会。就像@Mumeltier说的，如果你把大小设置为px而不是百分比，那就行了。但我猜你不想硬编码像素大小。因此，一种选择是将表格单元格的宽度设置为表格大小的1/6：

.buttons tr td {
    width: 16.66667%;
}

我没有安装浏览器来说明你遇到的问题，所以我不能100%确定这个解决方案是否适用于你。

相关文章：