Question

设置<H1>标记（或任何<H*>标记）的背景颜色时，该元素会跨越HTML页面的body元素的长度。

<H1>A</H1>

H1
{
  background: #ddd;
}

下图显示了问题和理想结果

我可以通过静态设置css中<H1>标记的宽度来获得所需的效果

H1
{
    background: #ddd;
    width: 10px;
}

问题在于，如果<H1>标记内的文字大于10px，则会溢出背景。

Answer 1

h1个元素使用display: block，这是正确的默认行为。它可以防止后续内容出现在同一行上，并允许边框和背景成为内容区域的（适当的）全宽。

如果您需要元素仅采用文本的宽度，请使用以下方法之一：

display: inline-block如果您希望标题具有块元素的功能（例如能够设置填充，高度和宽度）

＆＃13;

h1 {
  background-color: #CCC;
  border: 1px solid #000;
  display: inline-block;
  padding: 2px 3px;
}

＆＃13;

<h1>h1</h1>

<!-- here's where this fails -->

<h1>h1 again</h1>

＆＃13;

Answer 2

无需设置宽度。如果需要，只需将显示类型从block更新为inline或inline-block。

这样的事情：

h1.ib {
    display: inline-block;
}

Answer 3

您可以使用display属性控制元素的布局模式。

然而，存在一个问题：大多数使盒子缩小到其内容而不是增长以覆盖容器块的值是内联级的，例如： inline-block，inline-table，inline-flex。这意味着，如果标题周围有其他内联内容，它们将显示在同一行（如果适合）。

可能你不希望如此。然后，您可以使用display: table：

h1 {
  display: table;
  background-color: #CCC;
}

Before
<h1>h1</h1>
Middle
<h1>h1 again</h1>
After

table显示是块级别，因此标题将与周围内联内容的行不同。但与block不同，内容是使用表格布局进行布局的，因此标题会缩小到其内容。

Answer 4

编辑：Jack Pattishall和zzzzBov打败了我。

您实际上不必设置宽度。有一个CSS属性可用于解决您的问题。 display:inline

内联元素只占用所需的宽度。

只需设置标题即可。

h1 {
display: inline;
}

Answer 5

这是一种节省字节的方法：

H1 {
display: inline;
background-color: #CCCCCC;
}

<h1>Your Text Here</h1><br>