estructura - formularios html ejemplos

¿Por qué mi elemento<legend> no se muestra 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

No tengo control sobre el HTML; Solo puedo editar CSS

Answer 1

Las leyendas simplemente no aceptan display: inline o display: inline-block , pero puedes darle float: left y se mostrará de manera similar a lo que quieres.

Answer 2

Las leyendas son especiales. En particular, su representación predeterminada no se puede describir en CSS, por lo que los navegadores utilizan medios distintos de CSS para representarlos. Lo que esto significa es que una leyenda posicionada estáticamente será tratada como una leyenda y será separada del contenido real del conjunto de campos.

Lo raro no termina ahí; Si invierte el orden del intervalo y la leyenda, la leyenda seguirá apareciendo en la parte superior en la mayoría de los navegadores (pero aparentemente no en Opera).