css背景颜色扩展到文本？

Question

如何设置不扩展到其父div宽度的文本的背景颜色？我使用h1 {background color:white;}并在我想要的文字周围包裹h1，但白色背景只是延伸到文字之外。这几乎就像你只是突出了这些词。

Answer 1

h1是一个块元素，因此，它将使用所有可用区域。所以将此元素更改为内联，仅使用其宽度

h1 {
  display: inline;
  background-color: white;
}

http://jsfiddle.net/wxNQR/

Answer 2

问题是h1是一个块级元素，默认情况下，块级元素将展开以填充父元素的所有可用宽度。

解决此问题的最简单方法是float元素：

h1 {
    background-color: white;
    float: left;
}

然后，您需要设置以下段落的样式，以便它不会绕过标题元素：

p {
    clear: left;
}

如果您觉得不支持IE7及以下版本，则可以使用相邻的兄弟选择器使此选择更整洁，以便只有p元素之后的h1个元素才会如此样式化：

h1 + p {
    clear: left;
}