css背景顏色擴展到文字？

Question

我將如何設置文本的背景顏色不擴展爲其父級的寬度div？我用h1{background color:white;}並圍繞我想要的文字包裝h1，但白色背景只是延伸到文本之外。這幾乎就像你只是強調單詞。

Answer 1

h1是一個塊元素，所以它將使用所有可用的區域。所以改變這個元素內聯，只使用其寬度

h1 { 
    display: inline; 
    background-color: white; 
} 

http://jsfiddle.net/wxNQR/

Answer 2

問題是，h1是塊級元素，默認情況下，塊級元素將展開以填充父元素的所有可用寬度。

解決這個最簡單的方法是float元素：

h1 { 
    background-color: white; 
    float: left; 
} 

然後，您將需要的款式下段，使其不流動一輪的標題元素：

p { 
    clear: left; 
} 

如果您不習慣支持IE7及以下版本，則可以使用相鄰的兄弟選擇器來使此選項更加整潔，以便在h1元素之後直接使用p元素：

h1 + p { 
    clear: left; 
}