Why won't my 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

`` elements are "dodgy". Have you considered simply moving the `` inside the ``? — thirtydot, Apr 28 '11 at 12:59
Can you not make 2 spans inside `legend` to do what you want? `LegendFollower` — Bazzz, Apr 28 '11 at 13:01
I'm confused, just came back to accept an answer and it's gone!! — Mild Fuzz, Apr 28 '11 at 13:45
But if it is the only way to make it work as I require, then it is still the right answer. The answer is right, the implementation of the legend tag is wrong! — Mild Fuzz, May 03 '11 at 09:55
Related issue in Firefox's Bugzilla https://bugzilla.mozilla.org/show_bug.cgi?id=653870 — Mike Gifford, Apr 13 '14 at 13:52
Related issue in Chrome's Bug tracker: https://code.google.com/p/chromium/issues/detail?id=481983 — TylerH, Apr 28 '15 at 15:51
@MildFuzz If you remove the `
` element, Firefox will now display `` inline. — TylerH, Apr 28 '15 at 15:59

score 33 · Accepted Answer · answered Apr 28 '11 at 14:13

33

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

answered Apr 28 '11 at 14:13

Boris Zbarsky

34,758
5
52
55

1

"default rendering can't be described in CSS" What does this mean, and why is it the case? Sounds like a bad way to implement HTML elements, to me. – TylerH Apr 28 '15 at 15:58
It means what it says: the traditional fieldset rendering can't actually be expressed in CSS. In particular the fact that the legend will make the fieldset wider as needed and the way the fieldset's border draws around the legend. – Boris Zbarsky Apr 28 '15 at 20:23

score 24 · Answer 2 · answered May 28 '15 at 17:45

24

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.

answered May 28 '15 at 17:45

kzh

19,810
13
73
97

This works for me, with Firefox 51.0.1 and IE 11, but is this reliable? – R. Schreurs Mar 06 '17 at 12:17
2

@R.Schreurs I've had plenty of success with it... I also use `width: fit-content` for the legend if I am not supporting IE 11/Edge – kzh Mar 07 '17 at 14:19

Why won't my element display inline?

2 Answers2

Linked