html - 如何使图例扩展字段集的整个宽度并保持内容填充？

Question

我的目标是渲染带有边框的字段集，并且图例位于顶部并带有背景色。图例的背景颜色应延伸到字段集的整个宽度。

基于 Make a legend fill up the full width within the fieldset ，我从以下 jsfiddle 开始:http://jsfiddle.net/pdgreen/wcYXX/0 .

看起来不错，但是fieldset没有padding，所以表单元素离border太近了。当我添加填充时，我剩下:http://jsfiddle.net/pdgreen/wcYXX/1/ .

内容看起来不错，但标题不再扩展字段集的宽度。

如果我用 div 围绕内容，我可以添加填充:http://jsfiddle.net/pdgreen/wcYXX/2/ ，但是这需要额外的 div。

有没有办法让它看起来像第三 fiddle ，而不需要额外的 div？

Answer 1

是的，通过在图例上用负边距抵消字段集的填充。像这样:http://jsfiddle.net/wcYXX/3/

我将字段集的边距设置为 -5px(与字段集的填充相同，但为负值)，然后添加 5px 填充以将文本放回到它所属的位置。

这也意味着您不再需要边框，它在旧版浏览器中不受很好的支持。

字段集 css 现在看起来像这样:

fieldset legend {
    background: #369;
    color: #FFF;
    font-weight: 700;
    text-align: left;
    white-space:nowrap;

    margin: -5px;
    padding: 5px;
    display: block;
    width: 100%;

}