使图例填充字段集中的整个宽度 [英] Make a legend fill up the full width within the fieldset
问题描述
我想为fieldset中的legend字段提供背景.我希望它占据整个宽度，但只能在字段集中.如果使用legend {width: 100%}，它将比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.
这里是一个示例，可在 JSFiddle 中运行:
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>
有什么办法可以使legend只填满fieldset内的宽度吗?
Is there any way I can make the legend only fill up the width within the fieldset?
推荐答案
请参见: http://jsfiddle.net/TAvRF/1/
您可以使用 box-sizing: border-box :
You can use 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/
Although, just setting padding: 0 and forgetting about box-sizing: border-box seems to work for me.. http://jsfiddle.net/TAvRF/6/
这篇关于使图例填充字段集中的整个宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
