couleur de fond de css étendre aussi loin que le texte?

Comment pourrais-je définir la couleur d'arrière-plan d'un texte qui ne s'étend pas à la largeur de son parent div? J'ai utilisé h1 {background color:white;} et enveloppé h1 autour du texte que je veux, mais le fond blanc juste s'étend au-delà du texte. C'est presque comme si vous êtes juste en soulignant les mots.

pourquoi ne pas changer la couleur du texte et de rendre l'arrière-plan-couleur:transparent? je ne suis pas exactement sûr de ce que vous essayez de faire ici.
Avez-vous essayé d'ajouter de la couleur d'arrière-plan sur la div à la place de l'élément h1?

OriginalL'auteur Matt | 2011-12-19

  1. 16

    h1 est un élément de bloc, donc , elle va utiliser toute la surface disponible. afin de changer cet élément inline, pour utiliser uniquement sa largeur

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

    http://jsfiddle.net/wxNQR/

    Cela a résolu. Malheureusement j'ai 5 minutes, jusqu'à ce que je puisse vérifier cela...
    Malheureusement? xD ......

    OriginalL'auteur eveevans

  2. 3

    Le problème, c'est que h1 est un bloc d'élément, et par défaut, les éléments de niveau bloc va s'étendre à remplir toute la largeur de l'élément parent.

    La façon la plus simple de résoudre ce problème est de float l'élément:

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

    Vous devrez ensuite le style du paragraphe suivant, de sorte qu'il ne coule pas de ronde de l'élément d'en-tête:

    p {
    clear: left;
}

    Si vous êtes à l'aise en ne soutenant pas IE7 et ci-dessous, vous pouvez utiliser le adjacents sélecteur de frères pour effectuer cette sélection propres, de sorte que seuls les p éléments directement après h1 éléments seront donc style:

    h1 + p {
    clear: left;
}
    Honnêtement, je trouve les flotteurs pour être l'un des principaux PITA, et en désaccord qui flotte actuelle de la facile la solution. Pourquoi ne pas simplement le texte à la ligne dans un <span>?
    OK, la "plus belle sémantique solution". L'introduction d'un span uniquement pour l'amour de style qu'il est en désordre, de l'OMI.
    parce que H1 pourrait être le sémantiquement correcte de l'élément à utiliser. OMI display:inline-block serait la plus belle façon de résoudre ce - si seulement c'était pris en charge par IE7..
    Merci mais il semble que tout ce que j'avais à faire était d'ajouter display:inline; pour une raison quelconque h1 aime casser une nouvelle ligne après et p clear:left; n'arrête pas de la couleur de fond de l'extension.
    Vous pourriez vouloir regarder ce que les blocs et les éléments en ligne. Elle ne sera probablement vous aider à résoudre ce genre de problème dans futuree.

    OriginalL'auteur lonesomeday