html - 在不指定确切尺寸的情况下使按钮具有相同的宽度

标签 html css

我有五个按钮。我希望它们占据父 div 的可用宽度,每个都具有相同的大小:

<div style="width: 100%; background-color: red;">
    <button type="button" style="width: 20%;">A</button>
    <button type="button" style="width: 20%;">B</button>
    <button type="button" style="width: 20%;">C</button>
    <button type="button" style="width: 20%;">D</button>
    <button type="button" style="width: 20%;">E</button>
</div>

有没有一种方法可以做到这一点,而无需手动确定它们每个都需要 20% 的宽度?我想在运行时删除一个按钮,这意味着我必须再次将每个剩余的按钮更新为 width=25%。

我只是在检查是否有更自动化的方法。

最佳答案

最简单也是最可靠的方法是使用表格:

<style>
.buttons { 
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  background-color: red; 
}
.buttons button { 
  width: 100%;
}
</style>
<table class=buttons>
 <tr>
    <td><button type="button">A</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>
</table>

(如果他们看到你的代码,这不会提高你在同事中的声誉,尽管它实际上可能比任何替代方法都更好地解决了问题。所以你可以考虑做下一个最好的事情:使用 div 标记和 display: table 等。在不支持此类 CSS 功能的旧浏览器上失败。)

关于html - 在不指定确切尺寸的情况下使按钮具有相同的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13483331/

相关文章:

php - 长层次(特定)CSS 属性与直接属性

html - 显示内联 block 或水平定位而不是垂直定位

html - IE 中的圆 Angular 使用边框半径

html - 如何将铁图标一个放在另一个下面

jquery - 使用 jQuery animate CSS opacity fade 和 @font-face 给 Internet Explorer 带来非常难看的字体渲染?

php - 无表搜索结果

html - 输入元素上的边框顶部不是 "straight"

html - CSS 文本格式

java - IE 10 给出多部分的完整路径名,如何仅获取文件名

javascript - 更改 html 页面时存在单击/保存变量状态时的许多操作