如何使按钮横跨一列的宽度答案

【问题标题】：How to make a button stretch across the width of a column如何使按钮横跨一列的宽度
【发布时间】：2011-06-21 14:43:16
【问题描述】：

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

例如在这里：http://davidnhutch.com。请注意浅灰色按钮如何仅与它们包含的文本一样大？我希望每个按钮都跨越该列的宽度，但我一生都无法弄清楚如何做到这一点。我已经环顾四周了，但对此还是有点陌生。

有什么想法吗？

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案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 还不存在。}

【讨论】：

您可以随时使用表格 ;-)
一点也不。文本在不同操作系统上的不同设置通常具有不同的大小：最后一行必须拆分并放在一个表格中。然而，这不能确定地做到跨平台和跨浏览器兼容：这些天网络必须。因此“不可能”。
好吧，我只是在开玩笑，但是在第一列上使用nowrap，在第二列上使用99% 宽度，在按钮上使用100% 宽度可能会起作用。但我不会费心去尝试...

【解决方案3】：

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

【讨论】：