有没有办法让背景颜色与h2上的内容一起拉伸？

Question

我在hss元素的css中设置了以下内容：

...
    width: 10%;
    display: block;
    background-color: #eee;


    overflow-x: visible;
    white-space: nowrap;
...

如果我的h2标题文字不能放在一行（最右边一列），这有助于我将文本推到一边。我希望文本的整个宽度具有背景颜色，因此＆＃34; display：block;＆＃34;规则。但这不起作用。只有宽度（10％）是彩色的。

有什么建议吗？ 谢谢， Tabrez

以下是示例代码的示例：http://jsfiddle.net/VZccE/18

选择的解决方案：根据ptriek的建议摆脱h2的宽度。我错误地坐在那里。它需要更高一些级别。

Answer 1

我理解你的问题是“我希望标题以10％的宽度换行，但仍然有整个宽度的背景（100％）。”

如果这是你的意思，你可以将标题包装在div中。如果您将背景应用于div，则可以根据需要设置标题宽度。

demo

Answer 2

您可以使用绝对定位强制标题突破封闭的div。这是一个例子：

<强> HTML

<div>
    <h2 id="hello">Hello World! I like cookies!</p>
</div>

<强> CSS

div {
    width: 50px; height: 100px;
    background: #f00;
    position: relative;
}

h2 {
    white-space: nowrap;
    background: #00f;
    position: absolute;
    left: 0; top: 0;
}

这些背景颜色只是让您可以看到元素的定位方式。你仍然需要指定white-space: nowrap来强制标题成一行，但使这项工作的特殊调整是定位。注意封闭元素如何position: relative - 这可以确保绝对定位的h2的位置基于div，而不是窗口。

请参阅此操作：http://jsbin.com/aganam/3

Answer 3

只需移除宽度？我真的不明白为什么你把宽度设置为10％？