Why won't my <legend> element display inline?

Question

I am trying to apply display: inline; to the <legend> element in my <fieldset> element, so that the following <span> will follow on the same line, but my CSS is having no effect.

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

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

JSFiddle

EDIT

I have no control over the HTML; I can only edit CSS

Answer 1

Legends are special. In particular, their default rendering can't be described in CSS, so browsers use non-CSS means of rendering them. What that means is that a statically positioned legend will be treated like a legend and be separate from the actual content of the fieldset.

The weird doesn't end there; if you reverse the order of the span and the legend, the legend will still show up on top in most browsers (but not in Opera, apparently).

Answer 2

Legends just don't accept display: inline or display: inline-block, but you can give it float: left and it will display similarly to what you want.