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

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

我很高兴地报告说,在2013年,IE5/6/7用户不再是一大堆人.我想到这一点,这让我非常高兴:) (11认同)
如果你不关心IE 5/6/7用户(仍然是很多人),大纲是很有用的.IE 8和Firefox支持(所有当前版本)也不稳定.如果只有浏览器支持更好,这将是最好的选择(只要你不试图做任何边界效果,如圆角)!http://reference.sitepoint.com/css/outline (5认同)

Answer 4

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

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

Answer 5

我认为这会起作用

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

为图例标签添加边框

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