Question

我愿介绍一下<条码>。 field within a fieldset. 并且,我希望它能够完全 w,但只是在实地。如果我使用<代码>legend{width:100%}。页: 1

例如,可在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内的宽度?

Answer 1

http://jsfiddle.net/TAvRF/1/“rel=“nofollow” 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/“rel=“nofollow” 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/

Answer 2

我认为,像简单的婚礼问题一样,你可以很容易地通过重新制定或将婚dding列入<>条码/代码:

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

友情链接