私は Bootstrap を使用しています。これは水平フォームのデモです:
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail1" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="inputEmail1">
</div>
</div>
</form>
しかし、それぞれにIDを作成したくない<input>
ので、
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="block">
<span class="col-lg-2 control-label">Email</span>
<div class="col-lg-10">
<input type="email" class="form-control">
</div>
</label>
</div>
</form>
しかし、display:block
内部には入れられないdisplay:inline
ので、CSSを使用します
.block {
display: block;
}
動作していますが、正しいでしょうか?要素を要素()display:block
に入れてはいけないと聞いたからですdisplay:inline
label
ベストアンサー1
<label>
いいえ、HTML ではに を含めることはできません<div>
。
見るラベル要素の仕様:
コンテンツ モデル: フレージング コンテンツですが、要素のラベル付きコントロールでない限り、子孫のラベル付け可能な要素はなく、子孫のラベル要素もありません。
フレージングコンテンツがリンクされる場所:
フレージング コンテンツは、ドキュメントのテキスト、および段落内レベルでそのテキストをマークアップする要素です。フレージング コンテンツの連続によって段落が形成されます。
a abbr area
(マップ要素の子孫である場合)audio b bdi bdo br button canvas cite code data datalist del dfn em embed i iframe img input ins kbd keygen label map mark math meter noscript object output progress q ruby s samp script select small span strong sub sup svg textarea time u var video wbr text