如何使按钮在列的宽度上伸展

Question

我正在尝试使按钮跨越列的宽度。

e.g。在这里：http://davidnhutch.com。请注意浅灰色按钮的大小与它们包含的文本一样大？我希望每个按钮跨越该列的宽度，但不能为我的生活弄清楚如何做到这一点。我已经做了相当多的环顾四周，但我仍然有点新鲜。

有什么想法吗？

Answer 1

您必须使它们成为块元素才能设置宽度：

.button {
    display: block;
    width: 100%;
}

Answer 2

通常，这些按钮是所谓的“内联元素”。浏览器渲染器具有非常复杂的布局这些元素的算法。它就像Typesetting，但屏幕上有对象。

CSS和HTML一起影响算法的工作方式：确定对象的宽度和高度，颜色等。它们的位置和文本流动方式，或按钮的长度。

但是有一个限制。您不能对内联元素使用类似于可变宽度的任何内容。

如其他人建议的那样添加width: 100%; display: block会使某些按钮变得完美：但只有当它们从包含框的左侧或右侧开始时才会完美。如果它在一个句子之后，则它（应该）显示为：

<---width of container--->
Text
<----------button-------->

然而，按钮不再是“文本”之后，而是放在它下面。这是因为它现在是一个所谓的“块元素”。它就像一个完整的段落，而不是文本行中的元素。

如果这是你想要的;很好，问题解决了。如果这不是你想要的，而是想要：

<---width of container--->
Text <-------button------>

不可能。 _{CCS4如果添加inline-width: 100%或inline-height会很酷，并解决很多问题。但是CSS4还不存在。}

Answer 3

将width:100%添加到.button似乎适用于页面底部的中央和右侧按钮。