如何使按钮拉伸均匀以填充容器<div>(像一个带有单元格的表行)

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>伸展(具有相等的宽度)到父级<div>,我希望它们使用父级自动获取宽度<div>.所以,是的,我可以将.button宽度设置为25%,因为有4个,但如果我添加更多按钮,我希望它们自动获得新的宽度.

我希望我能够很好地解释自己,我确实环顾四周但却找不到适合自己的东西.我可以在CSS中执行此操作还是JS-job？

JSFiddle在这里.

谢谢.

Answer 1

它可以用display: table;和完成display: table-cell;

我知道表格带来的不好的内涵,但你没有使用表格标记,你只是act像桌子一样制作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>?

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