将背景颜色限制为标题宽度

Question

我试图让背景颜色严格遵守标题文本，而不是跨越页面的整个宽度。我知道块级元素占据了页面的整个宽度，所以我想知道除了强制内联样式之外是否还有其他方法可以解决这个问题。

编辑：如果我要使用 display: inline-block; 为什么即使我指定text-align: center;标题仍然保持对齐？我应该使用浮动吗？

Answer 1

或者显示为内联块可以满足大多数用例：

h1 { background-color: red; display: inline-block; }

Answer 2

也许是这样的：

在 HTML 中：

<div id="Heading">
   <span id="HeadingText">HEADING TEXT</span>
</div>

在CSS中：

#Heading
{
   /* Formatting of full heading */
}

#HeadingText
{
   /* Formatting for just heading text */
   background-color: #00ff00;
}

从您的问题猜测，这不是您正在寻找的答案，但它可能有用。

编辑：

或者，这也应该有效。但我很确定这是你想要避免的（内联，对吧？）......

<h1 style="background-color:#660000; display:inline;">Heading<h1>