使图例填充字段集中的整个宽度答案

【问题标题】：Make a legend fill up the full width within the fieldset使图例填充字段集中的整个宽度
【发布时间】：2011-06-10 22:47:22
【问题描述】：

我想为fieldset 中的legend 字段提供背景。我希望它占据整个宽度，但仅限于字段集中。如果我使用legend {width: 100%}，它将比fieldset宽。

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

<html>
<head>
<style>
fieldset {
    border:0;
    outline: 1px solid gray;
}

legend {
    font-weight:bold;
    background: orange;
    width: 100%
}
</style>
</head>
<body>
<fieldset>
    <legend>Legend</legend>
    Content of Fieldset
</fieldset>
</body>
</html>

有什么办法可以让legend 只填满fieldset 内的宽度？

【问题讨论】：

它在我的 Firefox 上并不宽... 编辑：哦，它在我的 Chrome 上更宽 >.

标签： css legend fieldset

【解决方案1】：

见：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;
}

那你可以加padding:http://jsfiddle.net/TAvRF/5/

虽然，只是设置 padding: 0 而忘记 box-sizing: border-box 似乎对我有用.. http://jsfiddle.net/TAvRF/6/

【讨论】：

谢谢，能够结合使用padding: 5px 真是太好了。
很高兴知道当前所有主流浏览器版本都支持它，不确定是否要注意旧版本：caniuse.com
字段集内容的填充呢？
@pgreen2 我通常做的是在包含内容的字段集中放置一个<div>。该标签可以完全按照预期填充。

【解决方案2】：

这听起来像是一个简单的填充问题，我认为您可以使用重置或在legend 中设置填充来轻松解决它：

legend {
    font-weight:bold;
    background: orange;
    width: 100%;
    margin: 0;       /* added just in case... */
    padding: 0;
}

【讨论】：

谢谢，这也解决了问题。但是当使用box-sizing: border-box; 时，我可以使用自定义填充。