☰

は ブロック内は 正しいですか？質問する

tag-icon • tag-icon html css twitter-bootstrap
は ブロック内は 正しいですか？質問する

私は 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:inlinelabel

ベストアンサー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

おすすめ記事