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

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>

Answer 3

我认为这可以解决这个问题：

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

你的css将是：

#Heading{
    background-color:#CCC;
}
#HeadingText{
    display:inline-block;
    background-color:#FF0000;
}

Answer 4

您必须指定text-align：center;属性为包含div块的父元素，以使用display：inline-block;

将标题及其背景居中