允许列表内的 div 吗？ [复制]答案

【问题标题】：Is div inside list allowed? [duplicate]允许列表内的 div 吗？ [复制]
【发布时间】：2010-12-27 06:28:21
【问题描述】：

我知道 DIV 内 LI 是不允许的，但我最近在许多“大”网站上看到它，例如 Smashing Magazine、Web Designer Wall em>...等

我尝试验证网站，但它们有错误，但 LI 中的 DIV 没有任何信息？！

那么我可以在LI 中使用它吗，我需要它有效吗？

【问题讨论】：

谁说<div> 不是<li> 的有效子元素？
您是否有要询问的具体案例，或者这是一个一般性问题？通常，DIV 不会在 LI 内使用。从语义上讲，DIV 没有任何意义——它只是一个用于表示问题的容器。因此，它不会真正影响文档的语义，但很可能在大多数情况下，您可能会想使用一个 <SPAN>标签可能是更好的选择。
规则是<div> 不允许作为<ul> 或<ol> 的直系后代。因为那里只允许列出列表项 (<li>)。
<li> can contain any element that is valid in <body> - stackoverflow.com/q/4967976/1066234

标签： html validation xhtml html-lists

【解决方案1】：

作为附录：在 HTML 5 之前，虽然 li 中的 div 有效，但 dl、dd 或 dt 中的 div 无效！

【讨论】：

其实根据HTML5草案，dt和dd元素的内容模型是“流式内容”，所以div在这两个元素中都是允许的。不过，dl 不允许这样做是对的。
HTML4 就是这种情况。我编辑了我的答案以澄清
确认此答案的链接：developer.mozilla.org/en-US/docs/Web/HTML/Element/dl

【解决方案2】：

我从网页设计领域开始，我在 LI 中使用了 DIV，语义没有问题。我认为列表中不允许使用 DIV，这意味着您不能将 DIV 放入 UL 中，但将其插入 LI 上没有问题（因为 LI 只是列表项哈哈）我遇到的问题是，有时 DIV 的行为与平时有些不同，但没有什么是我们优秀的 CSS 无法处理的哈哈。无论如何，对不起我的英语不好，如果我的回答没有帮助哈哈祝你好运！

【讨论】：

【解决方案3】：

如果你想让菜单项的整个框都可点击，我知道你会想要这样做。我曾经在“a”标签中插入一个“li”标签来做到这一点，但这似乎更有效。

【讨论】：

如果你想让一个菜单项的“整个盒子”可以点击，你只需要使用 CSS 将它的子锚元素设置为“display:block”或“display:inline-block”。无需为此目的修改标记。

【解决方案4】：

如果我没记错的话，li 过去中的 div 是无效的。

@Flower @Superstringcheese Div 应该在语义上定义文档的一部分，但实际上它已经失去了这个角色。然而，Span 应该包含文本。

【讨论】：

section 元素是您要定义文档的一个部分。 div 没有任何意义。 dev.w3.org/html5/spec/Overview.html#the-div-element
你说的是草稿，这还不是现实。
如果我没记错@mystrdat 你是对的。有人质疑我最近的断言，即你不能这样做，当我查到它时，我错了。但我强烈记得实际上验证标记有一次错误输出清楚地表明我不允许将 div 放入 lis 中。

【解决方案5】：

如果你查看xhtml1-strict.dtd，你会看到

<!ELEMENT li %Flow;>
<!ENTITY % Flow "(#PCDATA | %block; | form | %inline; | %misc;)*">
<!ENTITY % block
     "p | %heading; | div | %lists; | %blocktext; | fieldset | table">

因此div、p 等可以在li 内（根据 w3.org 的 XHTML 1.0 Strict DTD）。

【讨论】：

HTML 4.01 DTD 也是如此。

【解决方案6】：

是的，根据xhtml1-strict.dtd 是有效的。以下 XHTML 传递了validation：

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test</title>
</head>
<body>
<ul>
  <li><div>test</div></li>
</ul>
</body>
</html>

【讨论】：

对<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">仍然有效。
@buildakicker - 仅在 HTML5 中使用（此声明是可能的，因为 HTML5 不再基于 SGML，因此不需要 DTD）。在需要 DTD 的其他 HTML 规范迭代中使用它是不正确的。
@DavidWatson 感谢大卫的澄清。我没有看到在他的问题中声明的 DocType ，但在这个答案中声明了。
如果严格有效，则在所有内容中都有效
@jasdeepkhalsa 不完全是。 XHTML 1.0 Strict 中有几个属性在 HTML5 中不再有效。