Html <label> 块中的 <div> 是否正确?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18609554/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 13:01:20  来源:igfitidea点击:

Is <div> inside <label> block correct?

htmlcsstwitter-bootstrap

提问by Steely Wing

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

我正在使用 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>

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

但我不想为每个创建 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>

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

display:block不能在里面display:inline,所以我使用 CSS

.block {
  display: block;
}

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

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

回答by Quentin

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

不,HTML 不允许 a<label>包含<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

短语内容是文档的文本,以及在段落内标记该文本的元素。大量的措辞内容形成段落。

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