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中引发一些问题＆lt; 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;
}

这种方法一致（与所有浏览器都不支持的内联块不同）。

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