假设我有一个带有以下按钮的<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>的长度(宽度相等)拉伸(stretch)到父<div>,并且我希望它们使用父<div>自动获得宽度。因此,是的,我可以将.button宽度设置为25%,因为其中有4个,但是如果我添加更多按钮,我希望它们自动获得新的宽度。

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

JSFiddle here.

谢谢。

最佳答案

可以使用display: table;display: table-cell;完成

我知道表格附带的不好的含义,但是您没有使用表格标记,您只是使div的act像表格一样。

参见demo 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;
}
​

关于html - 如何使按钮平均拉伸(stretch)以填充容器<div>(就像带有单元格的表格行一样),我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/13532660/

10-12 13:04
查看更多