Pourquoi ma couleur d'arrière-plan ne montre pas si j'ai display: inline?

<html>
    <body>
       <div style="display: inline; background-color: #555;">
            <h3>test</h3>
       </div>
    </body>
</html>

Voici mon code. Je me demande pourquoi ma couleur d'arrière-plan ne s'affiche pas. Si je change de css display de inline block, puis il s'afficher. Pourquoi il ne s'affiche pas si l'affichage est en ligne? Je suis en train d'essayer de comprendre la raison du problème autre que la recherche d'une solution.

Voir aussi: stackoverflow.com/questions/3099030/...

OriginalL'auteur user926958 | 2011-09-16

  1. 9

    La div ne prend pas la place si c'est en ligne. si vous souhaitez qu'un élément inline qui montre que la hauteur des enfants, puis utilisez display: inline-block;.

    Que pour une bonne discussion, j'avais confiance QuirksModes'prendre de meilleures que les miennes. L'essentiel est qu'un inline élément n'est pas de pousser les autres éléments de la route.

    +1, à nice. inline-block est plus probable que l'OP avait le désir.
    Je suis en train d'essayer de comprendre la raison du problème au lieu de chercher la solution. Pouvez-vous expliquer plus en détail sur le problème? Voulez-vous dire si il est en ligne, alors il ne peut pas détecter la largeur de la h3, de sorte qu'il tirage de la largeur de 0?
    Je comprends bien que l'élément ne prend plus de place qu'il doit montrer qu'il est > * sur la même ligne de texte. Désolé, mes connaissances en CSS s'arrête là où il n'aide plus me de style de la page s'affiche correctement, mais le widget en bas de la QuirksMode lien devrait rendre assez facile à comprendre.

    OriginalL'auteur fncomp

  2. 2

    Le problème est que vous avez une H3, un blocking element, à l'intérieur de la inline element.

    Vous pouvez voir ce qui se passe avec:

    h3
{
    background-color: inherit;   
}

    ou faire H3 en ligne:

    h3
{
 display: inline;   
}
    Désolé, avait à dire quelque chose puisque j'ai ri pour la deuxième fois. J'aime ce nom 🙂

    OriginalL'auteur Joe

  3. 1

    solution simple, mieux, dans certains cas, c'est pour ajouter un peu de rembourrage à la ligne div contenant votre tête

    <div style="display: inline; background-color: #555; padding:5px;">
<h3>test</h3>
</div>

    OriginalL'auteur Fahad

  4. 1

    La dernière révision de CSS2.1 a ceci à dire sur la question:

    Quand une ligne box contient un écoulement au niveau du bloc de la boîte, la boîte inline
    (et ses inline ancêtres au sein de la même zone de ligne) sont cassés autour de
    le bloc au niveau de la boîte (et de tout bloquer au niveau des frères et sœurs qui sont consécutives
    ou seulement séparés par réductible espaces et/ou des flux de
    des éléments), le fractionnement de la ligne de la boîte en deux cases (même si
    côté est vide), un de chaque côté du bloc au niveau de la boîte(es). La ligne
    boîtes avant la pause et après la pause sont enfermés dans des anonymes
    bloc de boites, et le bloc au niveau de la boîte devient un frère ou d'une de ces
    anonyme boîtes. Lorsqu'une telle inline zone est affectée par une relative
    le positionnement, le tout résultant de la traduction affecte également le niveau bloc
    boîte contenues dans la ligne de la boîte.

    En d'autres termes, à partir d'un modèle de point de vue, le inline div et h3 combinaison forme une ligne de la boîte, une boîte de bloc et un autre inline boîte. Seuls les deux inline boîtes de prendre la mise en forme (c'est à dire la couleur d'arrière-plan) et le bloc de la boîte ne forme pas une partie de la ligne cadre défini par la div et prend ainsi ses arrière-plan par défaut-réglage de couleur (ce qui est transparent, montrant à travers la couleur d'arrière-plan de son bloc contenant de la boîte).

    OriginalL'auteur Alohci

  5. 0

    Si vous essayez de créer un surligneur effet utiliser le ci-dessous:

    <h3><span style="background-color: #555;">test</span></h3>

    OriginalL'auteur Reina

  6. 0

    div est un élément de bloc par défaut. Changer le modèle d'affichage d'un bloc élément inline n'est pas une bonne pratique. les rubriques sont les éléments de bloc. L'imbrication d'un élément de bloc dans un élément inline n'est pas valide html. Si vous voulez une mise en lumière comme effet (en donnant la couleur d'arrière-plan, juste pour le texte et non l'ensemble des élément de la boîte de), vous devez utiliser un élément inline comme un span.

    <html>
    <body>
       <div>
            <h3><span style="background-color: #555;">test</span></h3>
       </div>
    </body>
</html>

    OriginalL'auteur Mohsen