Question

我想做以下事情，但它在语义上是否正确？

<button>
  <div></div>
  <div></div>
</button>

Answer 1

目前的HTML5草案说它不正确。

http://www.w3.org/TR/2012/WD-html5-20120329/the-button-element.html#the-button-element说<button>必须只包含短语内容。短语内容定义为包括<span>但不包括<div>。

Answer 2

不，它无效。您可以在W3C验证它。

将其粘贴到直接输入中，然后验证。

<!DOCTYPE html>

<button>
  <div></div>
  <div></div>
</button>

设置UTF8编码，并在W3C测试时选择HTML5。

Answer 3

我确定这是异端的，但是如果您想要验证，您可以始终在按钮内使用<span>元素并将其设置为<div>：

button span {

  display: block;

}

<button>
  <span>I'm a div</span>
  <span>I'm a div</span>
  <span>I'm a div</span>
</button>

今天验证了这一点。是否会在十年内验证是另一回事......

Answer 4

跨度似乎是合法的。

Answer 5

Div和span元素没有任何语义。它们是泛型块和内联元素。当你使用它们时，你需要问自己关于语义的唯一问题是这个内容是否有更好的语义元素？。

也就是说，由于与语义无关的原因，将div放在按钮内是不正确的。 specification说明按钮的内容模型：

短语内容，但必须没有互动内容后代。

......一个范围是短语内容，但div不是。

Answer 6

button 应该包含单个 div 或 span，如果你想在一个按钮中放置多个 div 或 span，首先将每个内容放在一个 div 或 span 中并应用 style="Display:flex;"或 style="Display:-webkit-box;"。