html - <label> block 中的 <div> 是否正确？

Question

我用的是Bootstrap，它是水平形式的demo:

<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>

但我不想为每个 <input> 创建 ID , 所以

<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 )

Answer 1

不，HTML 不允许 <label>包含 <div> .

---

参见 the specification for the label element :

Content model: Phrasing content, but with no descendant labelable elements unless it is the element's labeled control, and no descendant label elements.

措辞内容链接到:

Phrasing content is the text of the document, as well as elements that mark up that text at the intra-paragraph level. Runs of phrasing content form paragraphs.

a abbr area (if it is a descendant of a map element) 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