html - h1 背景的动态宽度

Question

我的 CSS：

h1 {
    background-color: #f7953d;
    color: #FFF;
    width: 100%;
    padding: 6px 0 6px 10px;
    margin-bottom: 10px;
}

我的 HTML

<h1>Hello World</h1>

背景颜色总是拉伸到屏幕的 100%。如何使背景颜色在 h1 标签中的“世界”之后停止，而不是一直到屏幕末尾？

Answer 1

默认情况下，H1 是一个块元素，因此将跨越其父容器的整个宽度，您希望将其设为内联元素（很像跨度），以便它仅与它的内容一样宽。

有 2 种可能的解决方案取决于您的兼容性需求

display:inline;

将达到您之后的效果，但这确实意味着您的 H1 后面的任何内容都可能出现在同一行。

display:inline-block;

有影响你之后的效果，同时仍然迫使它​​后面的任何东西出现在 H1 下方唯一的缺点是它可能会在 IE<8 中引发一些问题，请参阅quirksmode了解更多详细信息

Answer 2

您可以通过将display: inline-block;CSS 添加到您的<h1>. 这将使其仅使用与其内容一样多的宽度，并且仍然尊重margin您padding给它的内容。

Answer 3

我会建议这样的事情：

HTML：

 <h1>Hello World</h1>
 <div class="clear"></div>

 <p>Elements after unafected by float</p>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS：

h1 {
    background-color: #f7953d;
    color: #FFF;
    padding: 6px 0 6px 10px;
    margin-bottom: 10px;
    float:left;
}

.clear {
    clear:both;
}

这始终有效（与并非所有浏览器都支持的内联块不同）。

元素的内联可能不是您想要的，因为您需要填充。