Html 如何使按钮跨列的宽度拉伸
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6427186/
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 a button stretch across the width of a column
提问by dnh37
I'm trying to make a button span the width of a column.
我正在尝试使按钮跨越一列的宽度。
e.g. here: http://davidnhutch.com. Notice how the light grey buttons are only as large as the text they contain? I'd like each button to span the width of that column, but can't for the life of me figure out how to do it. I've done quite a bit of looking around but am still kinda new to this.
例如这里：http: //davidnhutch.com。请注意浅灰色按钮的大小与它们包含的文本一样大吗？我希望每个按钮都跨越该列的宽度，但我一生都无法弄清楚如何做到这一点。我已经做了很多环顾四周，但对此仍然有点陌生。
Any ideas?
有任何想法吗？
回答by jeroen
You will have to make them block elements to be able to set a width:
您必须使它们成为块元素才能设置宽度：
.button {
display: block;
width: 100%;
}
回答by Pindatjuh
Generally, these buttons are so-called "inline element". The browser renderer has very complex algorithms of layouting these elements. It's like Typesettingbut with objects on your screen instead.
通常，这些按钮是所谓的“内联元素”。浏览器渲染器具有非常复杂的布局这些元素的算法。这就像排版，但屏幕上有对象。
CSS and HTML together influence how the algorithm works: determining the width and height, color, etc. of objects. Also their position and how text flows, or how long buttons are.
CSS 和 HTML 共同影响算法的工作方式：确定对象的宽度和高度、颜色等。还有它们的位置和文本如何流动，或者按钮有多长。
There is a limitation, however. You cannot use anything that's like a variable width for inline elements.
但是，有一个限制。您不能对内联元素使用任何类似于可变宽度的东西。
Adding width: 100%; display: blockas others suggested makes some buttons perfect: but only when they start at the left or right of the containing box. If it's after a sentence, then it (should) display as:
width: 100%; display: block按照其他人的建议添加一些按钮会很完美：但只有当它们从包含框的左侧或右侧开始时。如果它在一个句子之后，那么它（应该）显示为：
<---width of container--->
Text
<----------button-------->
However, the button is not after "Text" anymore, but is put below it. This is because it's now a so-called "block element". It is like a full paragraph, instead of elements in a text line.
但是，该按钮不再位于“文本”之后，而是位于其下方。这是因为它现在是所谓的“块元素”。它就像一个完整的段落，而不是文本行中的元素。
If this is what you want; fine and problem solved. If this is not what you want, and instead want:
如果这是你想要的；很好，问题解决了。如果这不是您想要的，而是想要的：
<---width of container--->
Text <-------button------>
This is not possible. CCS4 would be cool if it adds inline-width: 100%or inline-height, and solve a lot of problems. However CSS4 does not exists yet.
这是不可能的。CCS4 如果添加inline-width: 100%或会很酷inline-height，并解决很多问题。但是 CSS4 还不存在。
回答by Brandon Boone
Adding width:100%to .buttonseems to work for the center and right buttons at the bottom of the page.
添加width:100%到.button似乎适用于页面底部的中心和右侧按钮。
