¿Por qué mi elemento <legend> no se mostrará en línea?

Question

Estoy tratando de aplicar display: inline; al elemento <legend> en mi elemento <fieldset>, de modo que el siguiente <span> seguirá en la misma línea, pero mi CSS no tiene ningún efecto.

legend{ 
 
    display: inline; 
 
} 
 
span { 
 
    display: inline; 
 
}

<fieldset> 
 
    <legend>Legend</legend> 
 
    <span>Follower</span> 
 
</fieldset>

JSFiddle

EDITAR

tengo ningún control sobre el código HTML; Solo puedo editar CSS

Answer 1

Las leyendas son especiales. En particular, su representación predeterminada no se puede describir en CSS, por lo que los navegadores utilizan medios que no son CSS para representarlos. Lo que eso significa es que una leyenda posicionada estáticamente se tratará como una leyenda y se separará del contenido real del fieldset.

Lo raro no termina ahí; si invierte el orden del lapso y la leyenda, la leyenda mostrará todavía arriba en la mayoría de los navegadores (pero no en Opera, al parecer).

Answer 2

Leyendas simplemente no acepta display: inline o display: inline-block, pero puede darle float: left y se mostrará de forma similar a lo que desee.