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

Question

根据网络上的几个参考文献，无法定位图例。所以建议用span包装它：

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

然后我们可以将span放在fieldset中。但是当我想在字段集顶部添加边框时，传说中有一个间隙。幸运的是，我发现在图例中添加边框也可以修复这个微小的差距，但这是一个丑陋的解决方案（就像其他所有css一样）。你有没有更有效的解决方案来解决这个问题？

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

Answer 1

我发现float:left的简单LEGEND可以胜任。

Codepen示例：http://codepen.io/vkjgr/pen/oFdBa

Answer 2

我知道这是一个老问题，但是当我搜索“fieldset legend position”时我得到了这个页面，我真的找不到一个好的答案。

传说不会表现出来！所以我找到的最佳解决方案是将其定位为绝对位置并在字段集上设置填充顶部。 JSFildle示例：http://jsfiddle.net/carlosmartinezt/gtNnT/356/

fieldset {
    position:relative;
    padding-top:50px;
}

legend {
    position:absolute;
    top:20px;
    left:18px;
}​

Answer 3

使用大纲而不是边框​​：http://jsfiddle.net/leaverou/gtNnT/

Answer 4

OP几乎回答了他自己的问题：包装可以解决问题，但反过来也是如此。使用：

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

Answer 5

设置定位边距。它没有问题。

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

Answer 6

对于图例集，您可以使用margin-bottom“-50px”，对于fieldset，可以使用padding-top“50px”，因此不要重叠。

fieldset { 
padding-top:50px;
}

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

Answer 7

这对我来说似乎更直接。

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

Answer 8

发现这是最稳定的，在IE7，Firefox和Chrome中经过测试

fieldset legend { text-align:left; }

Answer 9

我最终只使用div元素。最后，我只需要边框和边框上的文字即可。

Answer 10

我认为这会起作用

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

为图例标记添加边框

legend {padding: 2px;border: 1px solid green;}