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

Posted 2023-02-16

【中文标题】为啥我的 <legend> 元素不能内联显示？

【英文标题】：Why won't my <legend> element display inline?为什么我的 <legend> 元素不能内联显示？

【发布时间】：2011-08-14 16:58:24

【问题描述】：

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

legend
    display: inline;

span 
    display: inline;

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

JSFiddle

编辑

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

【问题讨论】：

<legend> 元素是“狡猾的”。您是否考虑过简单地将<span> 移动到<legend> 中？

你不能在legend 中创建两个跨度来做你想做的事吗？ <legend><span>Legend</span><span>Follower</span></legend>

已编辑问题以使问题更清晰。

Firefox 的 Bugzilla 中的相关问题 bugzilla.mozilla.org/show_bug.cgi?id=653870

Chrome 的 Bug 跟踪器中的相关问题：code.google.com/p/chromium/issues/detail?id=481983

【参考方案1】：

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

【讨论】：

这适用于我，使用 Firefox 51.0.1 和 IE 11，但这可靠吗？

@R.Schreurs 我已经取得了很大的成功......如果我不支持 IE 11/Edge，我也会使用 width: fit-content 作为图例

【参考方案2】：

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

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

【讨论】：

"默认渲染无法用 CSS 描述"这是什么意思，为什么会这样？对我来说，这听起来像是实现 HTML 元素的糟糕方式。

意思是：传统的fieldset渲染实际上并不能用CSS来表达。特别是图例将根据需要使字段集更宽的事实以及字段集的边框围绕图例绘制的方式。