假设我有一个带有以下按钮的<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/