我正在尝试使背景颜色严格固定在标题文本上,而不是横跨整个页面宽度。我知道块级元素占据整个页面宽度,因此我想知道是否有其他方法(除了强制使用内联样式)可以解决这个问题。
编辑:如果我使用display: inline-block;为什么即使我指定了text-align:center;,我的标题仍然左对齐?我应该使用float吗?
编辑:如果我使用display: inline-block;为什么即使我指定了text-align:center;,我的标题仍然左对齐?我应该使用float吗?
<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>
你必须在包含 div 块的父元素中指定 text-align:center; 属性,以便使用 display:inline-block; 将标题和其背景居中显示。
我认为这会解决这个问题:
<div id="Heading">
<div id="HeadingText">HEADING TEXT</div>
</div>
你的 CSS 代码应该是:
#Heading{
background-color:#CCC;
}
#HeadingText{
display:inline-block;
background-color:#FF0000;
}