问题
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
回答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).
回答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.
来源:https://stackoverflow.com/questions/5818960/why-wont-my-legend-element-display-inline