Menu
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
740
An inline element will not accept height and width. It will just ignore it. So the height and width that you have entered in css will be ignored that is why the empty div is not visible. moreover try using inline-block, it will solve the issue.
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. That was a mind blow right there!
Inline elements display in a line. They do not force the text after them to a new line. An anchor (or link) is an example of an inline element. You can put several links in a row, and they will display in a line.
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).
120
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
