html - 如何使按钮均匀拉伸(stretch)以填充容器 (就像带有单元格的表格行一样)

Question

假设我有一个容器 <div>有一些按钮:

<div class="cont">
    <div class="button">Button 1</div>
    <div class="button">Button 2</div>
    <div class="button">Button 3</div>
    <div class="button">Button 4</div>
    <div style="clear:both"></div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

并为此分配了一些 CSS:

.cont{
    background:#0F0;
    width:400px;
    height:40px;
    line-height:40px;
}
.button{
    background:#F00;
    float:left;
    height:inherit;
    line-height:inherit;
}

背景颜色只是让我可以看到我在做什么。我想知道是否有一种无 JavaScript 的方法来制作所有按钮 <div> s 拉伸(stretch)(宽度相等)到父级 <div>我希望他们使用父级自动获取宽度 <div> .所以，是的，我可以设置 .button宽度为 25%，因为它们有 4 个，但如果我添加更多按钮，我希望它们自动获得新的宽度。

我希望我对自己的解释足够好，我确实环顾四周但找不到适合这个的东西。我可以在 CSS 中执行此操作还是 JS 作业？

JSFiddle here.

谢谢。

Answer 1

可以用display: table; 和display: table-cell;

我知道表格带来的不好含义，但您没有使用表格标记，您只是让 div 的行为像表格一样。

查看演示 here

<div class="cont">
    <div class="button">Button 1</div>
    <div class="button">Button 2</div>
    <div class="button">Button 3</div>
    <div class="button">Button 4</div>
</div>​

.cont{
    background:#0F0;
    width:400px;
    height:40px;
    line-height:40px;
    display: table;
}
.button{
    background:#F00;
    display: table-cell;
}
​