css背景颜色是否延伸到文本？

如何设置文本的背景色，使其不会扩展到其父级的宽度

div

？我使用了

h1

{background color:white；}

并将

h1

包装在我想要的文本周围，但白色背景仅扩展到文本之外。这就好像你只是在强调单词

问题在于

h1

是块级元素，默认情况下块级元素将扩展以填充父元素的所有可用宽度

解决此问题的最简单方法是

浮动

元素：

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

然后，您需要设置以下段落的样式，以使其不会在标题元素周围流动：

p {
    clear: left;
}

如果您不支持IE7及以下版本，您可以使用相邻的同级选择器使此选择更整洁，这样只有直接位于

h1

元素之后的

p

元素才会被设置为这样的样式：

h1 + p {
    clear: left;
}

---

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

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

---

为什么不更改文本的颜色并使背景色：透明？我不太清楚你想在这里做什么。你试过在div上添加背景色而不是h1元素吗？老实说，我发现float是一个主要的PITA，不同意float是最简单的解决方案。为什么不把文本包装成一个

？@MΓΓΓБПLL OK，这是“最好的语义解决方案”。引入

span

仅仅是为了设计样式，我认为它是混乱的，@MΓΓББLL，因为H1可能是使用的语义正确的元素。IMO显示：内联块将是解决这个问题的最好方法-如果IE7支持它的话..谢谢，但看起来我需要做的就是添加显示：内联；出于某种原因，h1喜欢在它之后打断一条新线，p清除：左；不会阻止背景色的扩展。@Ali您可能希望了解块级别和内联元素是什么。它可能会帮助您在将来解决此类问题。