web-dev-qa-db-ja.com

ボーダー付きのフィールドセット内に凡例を配置する方法は？

Web上のいくつかの参照によると、凡例を配置することはできません。したがって、spanでラップすることをお勧めします。

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

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

注：この質問を書き始めた後、私は同時に解決策を見つけましたので、私はまだそれを尋ねたいです。

cssformslegendfieldset
27
nocss guy

単純なfloat:left for LEGENDが仕事をします。

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

78
Veiko Jääger

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

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

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

legend {
    position:absolute;
    top:20px;
    left:18px;
}​
72
Carlos Martinez T

境界線の代わりにアウトラインを使用します： http://jsfiddle.net/leaverou/gtNnT/

12
Lea Verou

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

<span><legend>Foo</legend></span>
10
Marthein

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

legend {margin-left:50px;} /* 50px from Left of the Fieldset */
2
Chugworth

凡例にmargin-bottom "-50px"を使用し、フィールドセットにpadding-top "50px"を使用して重複しないようにすることができます。

fieldset { 
padding-top:50px;
}

fieldset legend { 
margin-bottom:-50px;
}
1
user3515900