Css 如何在带有边框的字段集中定位图例？

根据网络上的一些参考资料，不可能定位图例。因此，建议用span将其包裹起来：

<legend><span>Foo</span></legend>

Foo

然后我们可以在字段集中定位跨度。但是，当我想在字段集的顶部添加边框时，图例会有一个间隙。幸运的是，我发现在图例中添加边框也修复了这个小小的缺口，但这是一个丑陋的解决方案（与css的其他解决方案一样）。对于这个问题，你们还有什么更有效的解决办法吗

注意：在我开始写这个问题之后，我同时找到了解决方案，所以我仍然想问它。

我认为这会奏效

 <legend><span>ur text</span></legend>

---

设置定位的边距。它毫无问题地工作

legend {margin-left:50px;} /* 50px from Left of the Fieldset */

---

使用大纲而不是边框：

我知道这是一个老问题，但我在谷歌搜索“fieldset legend position”时看到了这一页，我真的找不到好的答案

传奇人物就是不肯表现！，所以我找到的最佳解决方案是将其定位为绝对位置，并在字段集上有一个填充顶部。JSFildle示例：

---

OP几乎回答了他自己的问题：包装确实有效，但事实恰恰相反。使用：

<span><legend>Foo</legend></span>

Foo

发现这是最一致的，在IE7、Firefox和Chrome中进行了测试

字段集图例
{
文本对齐：左对齐；
}

我最后只使用了div元素。最后，我只需要边框和边框上的文本，就是这样。

您可以使用底部边距“-50px”作为图例，顶部填充“50px”作为字段集，这样就不会重叠

fieldset { 
padding-top:50px;
}

fieldset legend { 
margin-bottom:-50px;
}

---

我发现简单的

float:left

for

LEGEND

就可以了

---

代码笔示例：

这对我来说似乎更直截了当

fieldset legend { 
    position:relative;
    left:20px;
}

---

---

让我看看我是否做对了；您想知道如何将图例标记从其原始位置移开，然后闭合上边框中的间隙？如果是，那么为什么还要使用fieldset legend标记集呢？为了语义和可访问性。元素的视觉样式与机器（如屏幕阅读器）处理它的方式没有多大关系。奇怪的是，这无法改变，因为我认为浏览器中的所有默认样式都是通过用户代理样式表设置的。将其标记为的副本，以便将来的人不必筛选所有这些答案。如果你不关心IE 5/6/7用户（仍然是一个很好的用户群体），大纲很有用。IE8和Firefox支持（所有当前版本）也不稳定。如果浏览器支持更好，这将是最好的选择（只要你不想做任何像圆角一样的fance边框效果）！我很高兴地报告，在2013年，IE5/6/7用户不再是一个好群体。我想了想，这让我非常高兴：）这并不能解决fieldsetsha的彩色背景问题！在b4会议上给出的uve演示没有u？设置页边顶部效果不好，因为图例仍然相对于字段集偏移。它的对齐方式随着图例高度的变化而变化这是为什么被否决的？@Craig Wayne，因为这个答案不能解决问题？这是无效的html（至少在html5中是如此）。这是一个无用的答案。这并不能回答问题，主要是关于垂直定位，而不是文本对齐。是的，我从谷歌登陆到这个页面，并且惊讶地发现

float:left

显然是最简单的答案。这是最好的解决方案。它比使用绝对定位或任何附加元素感觉好得多。是的，比绝对定位好。图例可能有自己的高度。在Chrome 55中不起作用：（捕捉得很好。比手动解释其不寻常的隐式高度要好得多。请在回答中添加一些解释，说明这如何解决此评论的问题。在看到/尝试此操作之前，我不知道相对和绝对是如何协同工作的。@Veiko的浮动应该使用。这是一种不好的做法，因为它将失败：

fieldset { 
padding-top:50px;
}

fieldset legend { 
margin-bottom:-50px;
}

fieldset legend { 
    position:relative;
    left:20px;
}