html - 放置一个在语义上是否不正确
或在一个

Question

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

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

score 55 · Accepted Answer

当前的 HTML5 草案说它是不正确的。

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

score 28 · Accepted Answer

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

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

<!DOCTYPE html>

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

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

score 16 · Accepted Answer

我确信这是异端邪说，但如果你想验证你总是可以<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>

这在今天得到了验证。它是否会在十年内生效是另一回事......

score 4 · Accepted Answer

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

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

短语内容，但不得有交互式内容后代。

… span 是对内容的措辞，但 div 不是。

score 3 · Accepted Answer

3

跨度似乎合法。

于 2017-10-02T14:06:22.477 回答

score -1 · Accepted Answer

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

html - 放置一个在语义上是否不正确或在一个?