Pourquoi mon élément ne s'affiche-t-il pas en ligne?

J'essaie d'Appliquer display: inline; à l'élément <legend> dans mon élément <fieldset>, de sorte que le <span> suivant suivra sur la même ligne, mais mon CSS n'a aucun effet.

legend{
    display: inline;
}
span {
    display: inline;
}
<fieldset>
    <legend>Legend</legend>
    <span>Follower</span>
</fieldset>

JSFiddle

Modifier

Je n'ai aucun contrôle sur le HTML; Je ne peux que modifier CSS

25
demandé sur TylerH 2011-04-28 16:57:08

2 réponses

Les légendes sont spéciales. En particulier, leur rendu par défaut ne peut pas être décrit en CSS, de sorte que les navigateurs utilisent des moyens non-CSS pour les rendre. Cela signifie qu'une légende positionnée statiquement sera traitée comme une légende et sera séparée du contenu réel du fieldset.

Le bizarre ne s'arrête pas là; si vous inversez l'ordre de la durée et de la légende, la légende apparaîtra toujours dans la plupart des navigateurs (mais pas dans Opera, apparemment).

27
répondu Boris Zbarsky 2011-04-28 14:13:46

Les Légendes n'acceptent tout simplement pas display: inline ou display: inline-block, mais vous pouvez le donner float: left et il s'affichera de la même manière que ce que vous voulez.

8
répondu kzh 2015-05-28 17:45:36