6

假设我有一个<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在这里。

谢谢。

4

3 回答 3

24

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

我知道表格带来的不好的含义，但您没有使用表格标记，您只是在制作 div 之act类的表格。

在此处查看演示

<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;
}
​
于 2012-11-23T16:22:16.820 回答
2

这是 CSS弹性盒子模型的完美用例。

HTML5 Rocks对此有很好的介绍。

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

于 2012-11-23T16:28:28.457 回答
0

我发现 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/

于 2019-01-08T12:14:57.950 回答