Почему мой <legend>элемент не отображается на экране? - PullRequest
Новая
       38

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

27 голосов
/ 28 апреля 2011

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

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

JSFiddle

EDIT

У меня нет контроля над HTML; Я могу редактировать только CSS

Ответы [ 2 ]

28 голосов
/ 28 апреля 2011

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

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

11 голосов
/ 28 мая 2015

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

...