动态宽度为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默认情况下是一个块元素，因此它将跨越它的父容器的全部宽度，使其成为一个内联元素（很像跨度），以便它只与其内容一样宽。

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

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; 
} 

这都能正常工作（不像是不是所有的浏览器都支持inline-block的） 。

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