假设我有一个容器 <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 作业?
谢谢。
最佳答案
可以用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;
}
关于html - 如何使按钮均匀拉伸(stretch)以填充容器 <div>(就像带有单元格的表格行一样),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13532660/