Html 如何使按钮均匀拉伸以填充容器 <div>（就像带有单元格的表格行）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13532660/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make buttons stretch equally to fill container <div> (Act like a table row with cells)
提问by George
Let's say I have a container <div>with some buttons in:
假设我有一个<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>??????????????????????????????????????????
And assigned some CSS to this:
并为此分配了一些 CSS：
.cont{
background:#0F0;
width:400px;
height:40px;
line-height:40px;
}
.button{
background:#F00;
float:left;
height:inherit;
line-height:inherit;
}
Background colours are just so that I can see what I am doing. I'm wondering if there is a JavaScript-free way to make all of the button <div>s stretch (with equal widths) to the parent <div>and I want them to automatically get the width using the parent <div>. So, yes I could just set the .buttonwidth to 25% because there are 4 of them but if I added more buttons I would want them to automatically get a new width.
背景颜色只是为了让我可以看到我在做什么。我想知道是否有一种无 JavaScript 的方法可以使所有按钮都<div>拉伸（宽度相等）到父级<div>，我希望它们使用父级自动获取宽度<div>。所以，是的，我可以将.button宽度设置为 25%，因为它们有 4 个，但如果我添加更多按钮，我希望它们自动获得新的宽度。
I hope I explained myself well enough, I did look around but couldn't find anything to suit this. Can I do this in CSS or is it a JS-job?
我希望我能很好地解释自己，我确实环顾四周，但找不到任何适合这一点的东西。我可以在 CSS 中做到这一点还是 JS 工作？
Thanks.
谢谢。
回答by Andy
It can be done with display: table;and display: table-cell;
它可以用display: table;和完成display: table-cell;
I know the bad connotations that come with tables but you aren't using table markup, you are just making div's actlike tables.
我知道表格带来的不好的含义，但您没有使用表格标记，您只是在制作act类似于表格的div 。
See 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;
}
?
回答by Alessandro Vendruscolo
This is a perfect use case of the CSS Flexible Box Model.
这是 CSS弹性盒模型的完美用例。
HTML5 Rockshas a nice introduction to this.
HTML5 Rocks对此有很好的介绍。
This needs vendor prefixes and it's not supported on old browsers. There's Flexiewhich is a polyfill for older browsers.
回答by Paul
I found out that HTML buttons are a bit weird, for example "text-align: center" will alter the position of the buttons in a div, whereas "margin: auto" does not. And also, changing the size of a button makes it's styling different (in Chrome).
我发现 HTML 按钮有点奇怪，例如“text-align: center”会改变按钮在 div 中的位置，而“margin: auto”不会。而且，更改按钮的大小会使其样式不同（在 Chrome 中）。
An alternative solution may be to make a clickable div, in this way you can also style the button, to be certain of how it looks cross-browser. (HTML5)
另一种解决方案可能是制作一个可点击的 div，通过这种方式，您还可以设置按钮的样式，以确定它在跨浏览器中的外观。(HTML5)
<a href="http://example.com">
<div>
anything
</div>
</a>
Reference: https://css-tricks.com/snippets/jquery/make-entire-div-clickable/
参考：https: //css-tricks.com/snippets/jquery/make-entire-div-clickable/
