如何使按钮拉伸到列的宽度

Question

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

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

有什么想法吗？

Answer 1

哈姆雷特

He was a man, take him for all in all,
I shall not look upon his like again.

霍雷肖

My lord, I think I saw him yesternight.

哈姆雷特

Saw? who?

霍雷肖

My lord, the king your father.

哈姆雷特

The king my father!

霍雷肖

Season your admiration for awhile
With an attent ear, till I may deliver,
Upon the witness of these gentlemen,
This marvel to you.

哈姆雷特

For God's love, let me hear.

霍雷肖

Two nights together had these gentlemen,
Marcellus and Bernardo, on their watch,
In the dead vast and middle of the night,
Been thus encounter'd. A figure like your father,
Armed at point exactly, cap-a-pe,
Appears before them, and with solemn march
Goes slow and stately by them: thrice he walk'd
By their oppress'd and fear-surprised eyes,
Within his truncheon's length; whilst they, distilled
Almost to jelly with the act of fear,
Stand dumb and speak not to him. This to me
In dreadful secrecy impart they did;
And I with them the third night kept the watch;
Where, as they had deliver'd, both in time,
Form of the thing, each word made true and good,
The apparition comes: I knew your father;
These hands are not more like.

Answer 2

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

CSS 和 HTML 共同影响算法的工作方式：确定对象的宽度和高度、颜色等。还有它们的位置以及文本的流动方式，或者按钮的长度。

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

按照其他人的建议添加

width: 100%; display: block

可以使某些按钮变得完美：但前提是它们从包含框的左侧或右侧开始。如果它在句子后面，那么它（应该）显示为：

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

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

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

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

这是不可能。 _{CCS4 如果添加}

inline-width: 100%

或

inline-height

那就太酷了，并且解决了很多问题。然而 CSS4 还不存在。

Answer 3

将

width:100%

添加到

.button

似乎适用于页面底部的中心按钮和右侧按钮。