使图例填满字段集中的整个宽度
我想要一个 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< /code> 仅填充 fieldset 内的宽度？
I would like to have a background for a legend field within a fieldset. And I want it to take up the full width, but only within the fieldset. If I use legend {width: 100%} it will be wider than the fieldset.
Here is an example, runnable in 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>
Is there any way I can make the legend only fill up the width within the fieldset?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
参见： http://jsfiddle.net/TAvRF/1/
您可以使用
box-sizing: border-box：然后你可以添加
填充：http://jsfiddle.net/TAvRF/5/，只需设置
padding: 0并忘记box-sizing: border-box似乎对我有用.. http://jsfiddle.net/TAvRF/6/See: http://jsfiddle.net/TAvRF/1/
You can use
box-sizing: border-box:Then you can add
padding: http://jsfiddle.net/TAvRF/5/Although, just setting
padding: 0and forgetting aboutbox-sizing: border-boxseems to work for me.. http://jsfiddle.net/TAvRF/6/这听起来像是一个简单的填充问题，我认为您可以使用重置或在
legend中设置填充来轻松解决它：It sounds like a simple padding problem, I think you can easily solve it using a reset or setting the padding in the
legend: