css - 如何在不使用浮点数或 pos:abs 的情况下获得最小宽度行为（例如浮动或 pos:abs 时）

Question

假设我有一个块元素，例如 h2：

<h2>Title</h2>

我给它一个背景颜色。背景将跨越包装器的整个宽度（应该如此）。

如果我浮动它，或者position: absolute，它会“收缩包装”这些词。但是，这两种方法都将元素从“流”中取出，并防止其将其余内容推到页面下方。

我想避免每次都在标题下方添加一个明确的内容。有更好的解决方案吗？我认为overflow物业可以做到这一点，但我没有弄清楚。

小提琴：

http://jsfiddle.net/QxRRh/

Answer 1

这是一种（非常简单的）方法......

h2 {
    display: table;
}

小提琴

Answer 2

将标题文本包装在 a 中<span>并将背景颜色应用于该跨度。

HTML：

<h2><span class="blue">Title</span></h2>

CSS：

.blue{ background-color:blue; }