6

我想有一个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?

4

2 回答 2

4

见：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/

于 2011-06-10T22:50:27.227 回答
1

It sounds like a simple padding problem, I think you can easily solve it using a reset or setting the padding in the legend:

legend {
    font-weight:bold;
    background: orange;
    width: 100%;
    margin: 0;       /* added just in case... */
    padding: 0;
}
于 2011-06-10T22:56:17.413 回答