Css Hintergrundfarbe so weit wie Text erstrecken?

Question

Wie könnte ich die Hintergrundfarbe eines Textes einstellen, der nicht die Breite seines übergeordneten div ausfüllt? Ich habe h1 {Hintergrundfarbe: weiß;} verwendet und h1 um den gewünschten Text gewickelt, aber der weiße Hintergrund erstreckt sich nur über den Text hinaus. Es ist fast so, als ob man die Wörter nur hervorheben würde.

Answer 1

H1 ist ein Blockelement, also wird es den gesamten verfügbaren Bereich nutzen. Ändern Sie dieses Element daher in inline, um nur seine Breite zu nutzen

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

http://jsfiddle.net/wxNQR/

Answer 2

Das Problem ist, dass h1 ein Block-Level-Element ist und standardmäßig Block-Level-Elemente sich ausdehnen, um die gesamte verfügbare Breite des übergeordneten Elements auszufüllen.

Der einfachste Weg, dies zu lösen, ist, das Element zu floaten:

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

Dann müssen Sie den folgenden Absatz stylen, damit er nicht um das Überschriften-Element herumfließt:

p {
    clear: left;
}

Wenn Sie sich nicht um die Unterstützung von IE7 und älter kümmern müssen, können Sie den adjacent sibling selector verwenden, um diese Auswahl sauberer zu gestalten, sodass nur p Elemente direkt nach h1 Elementen so gestylt werden:

h1 + p {
    clear: left;
}