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

前端之家收集整理的这篇文章主要介绍了css – 使图例填充字段集中的整个宽度前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我想在字段集中有一个传奇字段的背景.我希望它占据整个宽度,但仅限于字段集.如果我使用图例{width:100%},它将比fieldset更宽.

这是一个在JSFiddle中可运行的示例:

有什么方法可以让图例只填充字段集中的宽度?

最佳答案
见: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;
}

然后你可以添加填充:http://jsfiddle.net/TAvRF/5/

虽然,只是设置填充:0并忘记盒子大小:border-Box似乎对我有用.. http://jsfiddle.net/TAvRF/6/

猜你在找的CSS相关文章