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

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>

Answers


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).


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.


Need Your Help

Does const-correctness give the compiler more room for optimization?

c++ c pointers const const-correctness

I know that it improves readability and makes the program less error-prone, but how much does it improve the performance?

Render template from twig extension

php symfony dependency-injection twig

I have built a twig extension to do some things and one of them is render a template. How can I access from inside the twig extension the engine environment and call the Render method?