6

legend内のフィールドの背景が欲しいfieldsetです。そして、全幅を占めるようにしたいのですが、フィールドセット内だけです。私が使用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か?

4

2 に答える 2

4

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

于 2011-06-10T22:50:27.227 に答える
1

単純なパディングの問題のように聞こえますが、リセットまたはでパディングを設定することで簡単に解決できると思いますlegend:

legend {
    font-weight:bold;
    background: orange;
    width: 100%;
    margin: 0;       /* added just in case... */
    padding: 0;
}
于 2011-06-10T22:56:17.413 に答える