Почему элемент <legend> не будет отображаться в строке?

Я пытаюсь применить display: inline; к элементу <legend> в элементе <fieldset>, так что в той же строке будет следовать следующий <span>, но мой CSS не имеет эффекта.

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

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

Ответ 1

Легенды особенные. В частности, их рендеринг по умолчанию не может быть описан в CSS, поэтому браузеры используют не-CSS-средства для их рендеринга. Это означает, что статически расположенная легенда будет рассматриваться как легенда и быть отделена от фактического содержимого набора полей.

Странное на этом не заканчивается; если вы измените порядок пролета и легенды, легенда будет отображаться сверху в большинстве браузеров (но не в Opera, по-видимому).

Ответ 2

Легенды просто не принимают display: inline или display: inline-block, но вы можете дать ему float: left, и он будет отображаться аналогично тому, что вы хотите.