我想让博主H2,H3,H4背景限制在文字大小

Question

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

任何人都可以帮助我使用其他代码或 css 技巧来使其工作吗？

我用 "display: inline-block" 替换了 "display: block;" 并且它有效但出现了问题，如第 1 张图片所示。 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 时，它将表现得像一个内联元素。这意味着如果以下元素也在线，它们将并排显示。

您可以在 header 标签上使用 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>

我想让博主H2,H3,H4背景限制在文字大小

I want to make blogger H2,H3,H4 background confined to text size

css

blogger