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

Question

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

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

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

JSFiddle

修改

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

Answer 1

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

怪异并不止于此;如果你颠倒了跨度和图例的顺序，那么在大多数浏览器中，图例仍会仍然显示在顶部（但显然不是在Opera中）。

Answer 2

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