为什么我的< legend>元素显示内联？ [英] Why won't my <legend> element display inline?

问题描述

我试图将 display：inline; 应用于我的<$ c中的< legend> $ c>< fieldset> 元素，以便在同一行上跟随以下< span> ，但我的CSS没有效果。

< pre class =snippet-code-css lang-css prettyprint-override> legend {display：inline;} span {display：inline;}

 < fieldset> < legend>图例< / legend> < span> Follower< / span>< / fieldset>  

JSFiddle

编辑

我无法控制HTML;我只能编辑CSS

解决方案

图例是特殊的。特别是，他们的默认渲染不能在CSS中描述，所以浏览器使用非CSS的方式来渲染它们。这意味着静态定位的图例将被视为一个图例，并与字段集的实际内容分开。

奇怪的不是那里结束;如果您颠倒跨度和图例的顺序，图例将仍然显示在大多数浏览器的顶部（但显然不是在Opera中）。

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

解决方案

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

这篇关于为什么我的&lt; legend&gt;元素显示内联？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！