限制背景颜色的宽度与标题相同

Question

我正在尝试使背景颜色严格固定在标题文本上，而不是横跨整个页面宽度。我知道块级元素占据整个页面宽度，因此我想知道是否有其他方法（除了强制使用内联样式）可以解决这个问题。

编辑：如果我使用display: inline-block;为什么即使我指定了text-align:center;，我的标题仍然左对齐？我应该使用float吗？

- Ashish

---

为什么不将背景颜色应用于文本元素？ - iambriansreed

你应该将标题的父元素设置为文本居中，同时为宽度设置自动边距。 - Jameson

Answer 1

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

- Jameson

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>

- CatShoes

---

谢谢！以后参考，是强制使用inline-block还是将块标签包装在div中更好的样式呢？ - Ashish

老实说，这不是我能回答的问题。我不知道最佳实践是什么。抱歉。不过，我猜最好使用内联或内联块而不是DIV。 - CatShoes

inline-block 似乎是我想要的，但这会破坏我的居中对齐元素的能力。 - Ashish

如果您使用inline-block并希望居中文本，我认为您需要使用内联元素的父元素的text-align: center。 - CatShoes

Answer 3

你必须在包含 div 块的父元素中指定 text-align:center; 属性，以便使用 display:inline-block; 将标题和其背景居中显示。

- manojadams

---

谢谢！顺便问一下，你知道原因吗？ - Ashish

Answer 4

我认为这会解决这个问题：

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

你的 CSS 代码应该是：

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

- Selçuk