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工作？

JSFiddle here.

感谢。

Answer 1

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

来完成

我知道表格带来的不良内涵，但你没有使用表格标记，你只是在制作div act表格。

请参阅演示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;
}

Answer 2

这是CSS Flexible Box Model的完美用例。

HTML5 Rocks对此有一个很好的介绍。

这需要供应商前缀，旧浏览器不支持。有Flexie这是旧浏览器的填充。

Answer 3

我发现HTML按钮有点古怪，例如“ text-align：center”将改变div中按钮的位置，而“ margin：auto”则不会。而且，更改按钮的大小也会使其样式有所不同（在Chrome中）。

另一种解决方案可能是制作一个可点击的div，通过这种方式，您还可以设置按钮的样式，以确保其跨浏览器的外观。（HTML5）

<a href="http://example.com">
  <div>
     anything
  </div>
</a>

参考：https://css-tricks.com/snippets/jquery/make-entire-div-clickable/

如何使按钮平均伸展以填充容器<div>（像一个带有单元格的表格行）</div>

3 个答案: