如何使图例扩展字段集的全宽并保持内容填充？

Question

我的目标是渲染带边框的字段集,并使用背景颜色将图例放在顶部.图例的背景颜色应扩展到字段集的整个宽度.

基于Make a legend填充字段集中的整个宽度,我开始使用以下jsfiddle:http://jsfiddle.net/pdgreen/wcYXX/0.

它看起来不错,但fieldset没有填充,因此表单元素太靠近边框.当我添加填充时,我留下:http://jsfiddle.net/pdgreen/wcYXX/1/.

内容看起来很好,但标题不再扩展字段集的宽度.

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

有没有办法让它看起来像第三个小提琴,没​​有额外的div？

Answer 1

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

我将fieldset的边距设置为-5px(与fieldset的填充相同,但是为负),然后添加5px填充以将文本放回到它所属的位置.

这也意味着您不再需要边框,这在旧版浏览器中不受支持.

fieldset css现在看起来像这样:

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

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

}