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

Question

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

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

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

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

如果我div将内容用.div

有没有办法让它看起来像第三把小提琴，没​​有额外的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%;

}