Question

我希望获得legend内fieldset字段的背景信息。我希望它占据整个宽度，但仅限于字段集。如果我使用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中的宽度？

Answer 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/

Answer 2

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

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

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

2 个答案: