是 &lt;div&gt;<标签>内块正确吗? [英] Is &lt;div&gt; inside &lt;label&gt; block correct?

问题描述

我正在使用 Bootstrap，它是水平形式的演示:

<div class="form-group"><label for="inputEmail1" class="col-lg-2 control-label">电子邮件</label><div class="col-lg-10"><input type="email" class="form-control" id="inputEmail1">

</表单>

但我不想为每个 创建 ID，所以

<div class="form-group"><label class="block"><span class="col-lg-2 control-label">电子邮件</span><div class="col-lg-10"><input type="email" class="form-control">

</表单>

但是display:block不能在display:inline里面，所以我用CSS

.block {显示:块；}

它正在工作，但它正确吗?因为我听说我们不应该把 display:block 元素放入 display:inline 元素 (label)

解决方案

不，HTML 不允许 包含

.

<小时>

请参阅标签元素的规范:

<块引用>

内容模型:短语内容，但没有后代可标记元素，除非它是元素的标记控件，并且没有后代标签元素.

短语内容链接到的位置:

<块引用>

短语内容是文档的文本，以及在段落内标记该文本的元素.段落内容构成段落.

a abbr area(如果它是地图元素的后代)audio b bdi bdo br button canvas cite code data datalist del dfn em embed iframe img input ins kbd keygen label地图标记数学表 noscript 对象输出进度 q ruby​​ s samp 脚本选择小跨度强子 sup svg textarea 时间 u var 视频 wbr 文本

I am using Bootstrap, it's demo of horizontal form:

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

but I don't want create ID for each <input>, so

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

but display:block can't be inside display:inline, so I use CSS

.block {
  display: block;
}

it's working, but is it correct? because I heard that we should not put display:block element into display:inline element (label)

解决方案

No, HTML does not allow a <label> to contain a <div>.

---

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

Where phrasing content links to:

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

这篇关于是 &lt;div&gt;<标签>内块正确吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！