37

ウェブ上のいくつかの参考文献によると、凡例を配置することはできません。したがって、スパンでラップすることをお勧めします。

<legend><span>Foo</span></legend>

次に、フィールドセット内にスパンを配置できます。しかし、フィールドセットの上に境界線を追加したい場合は、凡例にギャップがあります。幸いなことに、凡例に境界線を追加すると、この小さな小さなギャップも修正されることがわかりましたが、それは醜い解決策です（cssを使用する他のすべての場合と同様）。この問題に対する有効な解決策は他にありますか？

注：この質問を書き始めた後、同時に解決策を見つけたので、それでも質問したいと思います。

4

10 に答える 10

98

私は簡単float:leftにLEGEND仕事をすることがわかりました。

Codepen サンプル: http://codepen.io/vkjgr/pen/oFdBa

于 2014-07-08T09:07:37.613 に答える
73

これは古い質問であることは知っていますが、「フィールドセットの凡例の位置」をグーグルで検索したときにこのページを取得しましたが、本当に良い答えが見つかりませんでした.

凡例はまったく動作しません! したがって、私が見つけた最善の解決策は、凡例を絶対位置に配置し、フィールドセットにパディング トップを配置することでした。JSFildle の例: http://jsfiddle.net/carlosmartinezt/gtNnT/356/

fieldset {
    position:relative;
    padding-top:50px;
}

legend {
    position:absolute;
    top:20px;
    left:18px;
}​
于 2012-10-16T09:56:33.657 に答える
12

ボーダーの代わりにアウトラインを使用してください: http://jsfiddle.net/leaverou/gtNnT/

于 2011-02-01T15:04:31.650 に答える
11

OPは彼自身の質問にほとんど答えました.ラッピングはうまくいきますが、それは逆です. 使用する：

<span><legend>Foo</legend></span>
于 2012-12-12T16:27:17.517 に答える
2

配置のマージンを設定します。問題なく動作します。

legend {margin-left:50px;} /* 50px from Left of the Fieldset */
于 2011-02-01T12:32:39.650 に答える
0

これは私にはより簡単に思えます。

fieldset legend { 
    position:relative;
    left:20px;
}
于 2015-02-04T19:25:57.743 に答える
-4

IE7、Firefox、および Chrome でテストされた、これが最も一貫していることがわかりました

fieldset legend { text-align:left; }

于 2012-12-17T12:13:41.330 に答える
-13

これはうまくいくと思います

 <legend><span>ur text</span></legend>

凡例タグにボーダーを付ける

legend {padding: 2px;border: 1px solid green;}
于 2011-02-01T09:22:16.453 に答える