Make a legend fill up the full width within the fieldset

和自甴很熟 提交于 2019-12-23 09:48:45

问题


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?


回答1:


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/




回答2:


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


来源:https://stackoverflow.com/questions/6312799/make-a-legend-fill-up-the-full-width-within-the-fieldset

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!