为什么我的 <legend> 元素不能内联显示？

Question

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

legend{
    display: inline;
}
span {
    display: inline;
}

<fieldset>
    <legend>Legend</legend>
    <span>Follower</span>
</fieldset>

JSFiddle

编辑

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

Answer 1

Legends 只是不接受display: inline 或display: inline-block，但你可以给它float: left，它会以你想要的方式显示。

Answer 2

传奇是特别的。特别是，它们的默认渲染无法用 CSS 描述，因此浏览器使用非 CSS 方式来渲染它们。这意味着静态定位的图例将被视为图例，并与字段集的实际内容分开。

怪事不止于此；如果您颠倒跨度和图例的顺序，图例将仍然在大多数浏览器中显示在顶部（但在 Opera 中显然不会）。