css – 使图例填充字段集中的整个宽度

我想在字段集中有一个传奇字段的背景.我希望它占据整个宽度,但仅限于字段集.如果我使用图例{width：100％},它将比fieldset更宽.

这是一个在JSFiddle中可运行的示例：

有什么方法可以让图例只填充字段集中的宽度？

最佳答案

见：http://jsfiddle.net/TAvRF/1/

你可以使用box-sizing: border-box：

legend {
    font-weight:bold;
    background: orange;
    width: 100%;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

然后你可以添加填充：http://jsfiddle.net/TAvRF/5/

虽然,只是设置填充：0并忘记盒子大小：border-box似乎对我有用.. http://jsfiddle.net/TAvRF/6/