是否有效跨越字段集中的图例？

Question

我试图在一个字段集中设计图例并且遇到很多麻烦。由于我的网站是响应式的，并且图例文本长度不同，我无法实现我想要的边距，相对或绝对定位。

<fieldset>
    <legend>Title</legend>
    <label>Label</label>
    <input type="text">
</fieldset>

我所需要的只是传奇表现得像普通的块级别。我发现这样做的唯一方法是将图例包裹在一个范围内。这是有效的HTML吗？我假设没有任何CSS解决方案？

<fieldset>
    <span>
        <legend>Title</legend>
    </span>
    <label>Label</label>
    <input type="text" />
</fieldset>

Answer 1

legend元素仅作为 fieldset元素的第一个子元素有效。 See the spec here.

我创建了一个小提琴here，其代码将<legend>元素包含在<span>中，并causes an error in the W3C validator。

另一种解决方案是使用CSS隐藏视图中的图例：

legend { display: none; }

然后，您可以为字段集创建自定义标题并为其设置样式。