1

現在、fieldsetandを使用しlegendて、次のようなフォームでいくつかの入力の周りにボックスを描画しています。

-  -  -  - -キャプション -  -  -  - -
| | | |
| | 入力 |
| | | |
| | | |
-------------------------

legend次のように、ボックスの下部に別のキャプション ( ) を配置する方法があるかどうか興味があります。

---------Caption1--------
| | | |
| | 入力 |
| | | |
| | | |
------キャプション2---------

フィールドセットの下部に別のlegendタグを使用するだけでは機能しません....

4

3 に答える 3

3

HTML 構文では、 1 つのlegend要素につき 1つのみ持つことができます。また、2 つの要素を使用しようとすると、最初の 1 つだけが凡例として表示されます。2 つ目は通常のコンテンツとして扱われます。fieldsetlegend

CSS を使用して下部の凡例のスタイルを設定することは、思ったほど単純ではありません。これは、IE がfieldset他のブラウザー (および HTML5 CR) とは異なる方法でパディングを適用するためです。ただし、次の例では、CSS 対応のブラウザーでかなり一貫した結果が得られるようです。

<style>
fieldset { position: relative; padding: 0.35em 0.625em 0.75em; }
.legend2 { position: absolute; bottom: -1.4ex; left: 10px; background: white  }
caption, .legend2 { padding: 0 2px }
</style>

<fieldset><legend>Caption <span class=legend2>Caption2</span></legend>
  Put fields here.
</fieldset>
于 2013-11-14T19:26:26.037 に答える