我想将博客H2，H3，H4的背景限制为文本大小

Question

enter image description here我使用博客，并且具有H2、3、4标签的CSS，具有特殊的背景和文本大小。 我希望背景大小自动适应文本大小，而不是页面的整个宽度。

有人可以用其他代码或CSS技巧来帮助我吗？

我替换为“ display：block;”与“显示：内联块”，它的工作，但有问题，如图像编号。 2。

.post-body h3,.post-body h2,.post-body h4{background-color:#333333;width: auto;padding:10px 20px;color:#FFF;display: block;margin:5px 0 15px;border-bottom:1px solid $(post.line)}

Answer 1

将h1标记设置为inline-block时，其行为将类似于内联元素。这意味着，如果以下元素也在线，则它们将彼此并排显示。

您可以在标题标签上使用inline-block，但请确保以下内容为display: block。这样将以新行开始元素，这样您就可以通过header标签实现所需的功能。

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

p {
  display: block; /* this is actually the default display for p tags*/
}

<h1>lorem ipsum dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga velit nulla molestiae sunt unde sint, neque optio, beatae cumque perspiciatis a quae eum omnis nesciunt minus veritatis nemo iusto soluta.</p>

Answer 2

如果标题元素位于文本内部或内联元素之间，则可以使用display: table

h2 {
  display: table;
  background: tomato;
}
    

<h2>Lorem ipsum dolor sit amet</h2>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>


<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor <h2>Lorem ipsum dolor sit amet</h2> laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>