CSS 使按钮填充容器元素的整个宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30558184/
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
Make a button fill the full width of container element?
提问by Alesh Houdek
I'm converting from using div's as buttons to actual buttons, and now I need to make buttons fill the full width of the container.
我正在从使用div's 作为按钮转换为实际按钮，现在我需要让按钮填满容器的整个宽度。
Code:
代码：
.container {
background-color: #ddd;
padding: 10px;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
.button {
display: block;
background-color: #bbb;
margin: 10px;
padding: 10px
}<div class="container">
<div class="button">
Fills the full width
</div>
<button class="button">
Does not fill the full width
</button>
</div>Adding display:blockto .buttondoes not work (although I'm sure that has got to be part of at the answer?), and neither does left: 0; right: 0. width: 100%sort of works, but it ignores the container's padding property and makes the button go too close to the right side of the container.
添加display:block到.button不起作用（尽管我确定这必须成为答案的一部分？），并且left: 0; right: 0. width: 100%有点工作，但它忽略了容器的填充属性，并使按钮太靠近容器的右侧。
Here is the JSFiddle: http://jsfiddle.net/mn40mz2n/
这是 JSFiddle：http: //jsfiddle.net/mn40mz2n/
回答by Joshua Kelly
Add the "box-sizing: border-box" property to all elements. The width and height properties include the padding and border, but not the margin. This will ensure your measurements across elements are correct and take into account the padding. display: block and width: 100% is the correct way to go full width but you need to remove the left/right margin on the button as it pushes it outside the containing element.
将“box-sizing:border-box”属性添加到所有元素。宽度和高度属性包括内边距和边框，但不包括边距。这将确保您对元素的测量是正确的并考虑到填充。display: block 和 width: 100% 是全宽的正确方法，但您需要删除按钮上的左/右边距，因为它将按钮推到包含元素之外。
* {
box-sizing: border-box
}
.container {
background-color: #ddd;
padding: 10px;
margin: 0 auto;
max-width: 500px;
}
.button {
background-color: #bbb;
display: block;
margin: 10px 0;
padding: 10px;
width: 100%;
}
for more information on the box-sizing property, read the MDN docs.
有关 box-sizing 属性的更多信息，请阅读 MDN文档。
回答by nomistic
It doesn't need to be too complicated. Boil it down to what you want it to do first, and then add padding, etc afterward. For your button just do this, and it will stretch to the entire width.
它不需要太复杂。首先将其归结为您希望它执行的操作，然后再添加填充等。对于您的按钮，只需执行此操作，它就会拉伸到整个宽度。
.button {
width:100%;
display:block;
}
回答by Barun
Possible answers:
可能的答案：
Answer 1: Why does display:block not stretch buttons or input elements
答案 1：为什么 display:block 不拉伸按钮或输入元素
Answer 2: CSS positioning to fill container: width vs. left/right?
width: 100%
is working properly. The button moves towards right because of the left-marginin the button.
工作正常。由于按钮中的 ，按钮向右移动left-margin。
回答by Dinei
You can use the CSS3 calc().
您可以使用CSS3 calc()。
If you need this to work on legacy browsers, see the acceptance here.
如果您需要在旧版浏览器上使用它，请参阅此处的接受。
.container {
background-color: #ddd;
padding: 10px;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
.button {
display: block;
background-color: #bbb;
margin: 10px;
padding: 10px
}
button.button {
width: calc(100% - 20px);
}<div class="container">
<div class="button">
Fills the full width
</div>
<button class="button">
Does not fill the full width
</button>
</div>