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

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>

Run Code Online (Sandbox Code Playgroud)

有什么方法可以让我legend只填充宽度fieldset吗？

Answer 1

thi*_*dot 5

请参阅： 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;
}

Run Code Online (Sandbox Code Playgroud)

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

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

归档时间：	14 年，5 月前
查看次数：	8944 次
最近记录：	14 年，5 月前