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

Question

根据网络上的几个参考资料，无法定位图例。所以建议用span包裹起来：

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

然后我们可以将跨度定位在字段集中。但是当我想在字段集的顶部添加边框时，图例有一个间隙。幸运的是，我发现在图例中添加边框也可以解决这个小小的差距，但这是一个丑陋的解决方案（就像所有其他的 css 一样）。您对这个问题有更有效的解决方案吗？

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

score 98 · Accepted Answer

我发现简单float:left的 forLEGEND就可以完成这项工作。

score 73 · Accepted Answer

我知道这是一个老问题，但是当我用谷歌搜索“字段集图例位置”时，我得到了这个页面，我真的找不到一个好的答案。

图例不会正常运行！所以我找到的最佳解决方案是将其绝对定位并在字段集上设置一个填充顶部。JSFildle 示例：http: //jsfiddle.net/carlosmartinezt/gtNnT/356/

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

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

score 12 · Accepted Answer

12

使用轮廓而不是边框：http: //jsfiddle.net/leaverou/gtNnT/

于 2011-02-01T15:04:31.650 回答

score 11 · Accepted Answer

OP 几乎回答了他自己的问题：包装可以解决问题，但情况恰恰相反。采用：

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

score 2 · Accepted Answer

设置定位边距。它可以正常工作。

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

score 1 · Accepted Answer

您可以将 margin-bottom "-50px" 用于图例，将 padding-top "50px" 用于字段集，因此不要重叠。

fieldset { 
padding-top:50px;
}

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

score 0 · Accepted Answer

0

这对我来说似乎更直接。

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

于 2015-02-04T19:25:57.743 回答

score -4 · Accepted Answer

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

fieldset legend { text-align:left; }

score -5 · Accepted Answer

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

score -13 · Accepted Answer

我认为这会奏效

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

给图例标签添加边框

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

10 回答 10