只适用于文本，直到文本，而不是整行

Question

这是我的虚拟测试。

以下是HTML内容：

<h1> Header </h1>

以下是CSS内容：

body {
 background: pink;
}

h1 {
 background-color: #454545;
}

网页呈现如下：

正如您可以在此图片中看到的那样，我将该属性应用于<h1>，但整行都有效。

我想要的是，直到单词“Header”的灰色背景，不超过（背景颜色只是一个例子。这不是仅的情况。）。< / em>的

Answer 1

尝试：

h1{
  display: inline-block;
}

Answer 2

h1 {
background-color: #454545;
display: inline-block;
}

修改：

迟到了...... @Scrimothy已经回答了。

Answer 3

您可以在标题标记内使用span。然后，您可以使用h1 span{...}作为您的css选择器，而不是设置所有标题或添加类来处理此问题。

我有一个网站，我希望标题正常行动（并在整个宽度上拉伸），但也需要在文本后面有背景。

＆＃13;

＆＃13;

body{
    background: pink;
}

h1{
    background-color: #454545;
}

h1 span{
    background-color: #454545;
}

＆＃13;

<h1>Normal heading with a background</h1>
<p>I'm some content</p>
<h1 style="background-color: transparent"><span>Heading with my content in a &lt;span&gt;</span></h1>
<p>I'm some more content</p>

＆＃13;

＆＃13;

＆＃13;