gpt4 book ai didi

css - 让图例填满字段集中的整个宽度

转载 作者:技术小花猫 更新时间:2023-10-29 11:37:46 24 4
gpt4 key购买 nike

我想为 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 只填满 fieldset 中的宽度?

最佳答案

参见: 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/

关于css - 让图例填满字段集中的整个宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6312799/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com