web-dev-qa-db-ja.com

フィールドセットのデフォルトのCSS値<legend>

<legend>内のタイトルとして<fieldset>を使用しようとしています。

IE以外のブラウザでは、<legend>は<fieldset>の上部の境界線に配置され、テキストは行の中央に完全に配置されます。

alt text

他の要素と同じように配置されるように、位置をリセットしようとしています。つまり、<h3>です。

これが私がこれまでに持っているCSSです。

fieldset legend {
    margin: 0;
    padding: 0;
    position: static;
    border: 0;
    top: auto; left: auto;
    float: none;
    display: block;
    font-size: 14px;
    line-height: 18px;
}

しかし、legendはまだ完全に線の中心にあります。

はい、マージン/パディング/トップ座標を追加できますが、このレイアウトをトリガーする要素のデフォルト値がブラウザーにあるかどうかを知りたいです。次に、これらの値をオーバーライドします。

Firefox（3.6.10）、Chrome（6.0.472.63）、Safari（5.0.2）

更新誰かが<legend>要素のスタイルを設定できた場合に備えて、この質問はもう1週間開いたままにしておきます。解決策が見つからない場合は、@ jnpclの回答を受け入れます。

htmlcsslegendfieldset
21
Marko

https://web.archive.org/web/20140209061351/http://tjkdesign.com/articles/how_to_position_the_legend_element.asp

簡単に言うと、ブラウザ間でLEGEND要素をフィールドセットに配置することはできません。

回避策：<legend>のテキストを<span>でラップしてから、<span>の位置を変更します。

8
drudge

これで十分です：

 form legend{
    float: left;
    width: 100%;
 }
27
Neoweiter

HTML --Living Standard に従って、以下のスタイルはデフォルトのように機能します。

fieldset {
    display: block;
    margin-inline-start: 2px;
    margin-inline-end: 2px;
    border: groove 2px ThreeDFace;
    padding-block-start: 0.35em;
    padding-inline-end: 0.75em;
    padding-block-end: 0.625em;
    padding-inline-start: 0.75em;
    min-inline-size: min-content;
}

legend {
    padding-inline-start: 2px; padding-inline-end: 2px;
}
0
Reza Mamun

仕様によると、 これがデフォルトのスタイルですfieldset要素とlegend要素の。これらのプロパティをリセットすることで、クリーンなlegend要素を操作できます。

0
Fla