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标签中的“World”之后停止背景颜色，而不是一直到屏幕的末尾？

Answer 1

H1默认是一个块元素，因此它将跨越其父容器的整个宽度，使其成为内联元素（非常类似于span），以使其仅与其内容一样宽。

根据您的兼容性需求，有两种可能的解决方案

display:inline;

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

display:inline-block;

你的效果是你的后续，但仍然强制跟随它出现在H1以下的唯一缺点是它可以在IE中发现一些问题<8见quirksmode更多细节

Answer 2

您可以通过添加display: inline-block; 到你的<h1>的CSS。 这将使其仅使用与其内容一样多的宽度，并仍然尊重您给它的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;
}

这一致地工作（不像所有浏览器都不支持的内联块）。

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