Make a legend fill up the full width within the fi

2019-06-21 04:18发布

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?

标签： css legend fieldset

2条回答

Animai°情兽

2楼-- · 2019-06-21 05:03

It sounds like a simple padding problem, I think you can easily solve it using a reset or setting the padding in the legend:

legend {
    font-weight:bold;
    background: orange;
    width: 100%;
    margin: 0;       /* added just in case... */
    padding: 0;
}

0人赞添加讨论(0) 举报

男人必须洒脱

3楼-- · 2019-06-21 05:05

See: http://jsfiddle.net/TAvRF/1/

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;
}

Then you can add padding: http://jsfiddle.net/TAvRF/5/

Although, just setting padding: 0 and forgetting about box-sizing: border-box seems to work for me.. http://jsfiddle.net/TAvRF/6/

0人赞添加讨论(0) 举报

Make a legend fill up the full width within the fi

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间