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

你。 提交于 2019-12-20 16:24:46

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!