我可以使用 div 作为 UL 的直接子代吗？答案

【问题标题】：Can I use div as a direct child of UL?我可以使用 div 作为 UL 的直接子代吗？
【发布时间】：2020-05-09 22:05:08
【问题描述】：

我有这个代码：

<ul>
   <div>
   </div>
</ul>

我觉得我的浏览器渲染它没有问题。我也曾在某处读过这篇文章，li 只能用作ul 的直接子代。

这是正确的吗？我不能将div 用作UL 的直接子代吗？是否有任何文件可以解决上述混淆？

编辑：这个链接说我可以http://css-tricks.com/forums/discussion/11593/divs-inside-uls/p1

【问题讨论】：

你应该把你的 div 标签放在一个 li 标签里
关于你的编辑：那个链接说你不能。
"在 html5 中 ul 中的 div 是完全合法的，你不会伤害任何东西，这真的很简单。你甚至可以将块元素包装在锚标签中，它的 craaaaazzzy 棒极了。"我在那里找到了这条评论。
@RockySingh 从同一篇文章中：“编辑：我背书了，直接在 ul 中的 div 是不正确的，但在 li 中的 div 是完全有效的。感谢 wolfcry 的澄清。 "
这里你必须考虑的是你为什么要这样做。如果该内容是一个列表项，请将其放入<li> 并让 CSS 处理您想要的方式；如果它不是列表项，它在列表中做什么？它应该出现在列表之后还是之前？

标签： html css

【解决方案1】：

没有。唯一可能是<ul> 子元素的元素是<li>。

HTML 4:

<!ELEMENT UL - - (LI)+                 -- unordered list -->

（另见how to read a content model definition in a DTD）

HTML 5:

内容模型：零个或多个 li 元素。

【讨论】：

“零个或多个 li 元素。”你的意思是说“li”的 0 个或多个元素，而不是其他标签。
@RockySingh 这是暗示，否则它会提到其他有效的孩子。

【解决方案2】：

对于 HTML 5：

http://www.w3.org/TR/html-markup/ul.html

允许的内容

零个或多个 li 元素

对于 HTML 4：

http://www.w3.org/TR/html401/struct/lists.html#h-10.2

<!ELEMENT UL - - (LI)+

编辑：

我忘记了另一个 HTML5 :D（这方面的规范与 W3C 的规范相同）

http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-ul-element

【讨论】：

【解决方案3】：

没有div不能嵌套在元素内部，只有

可以作为子元素。而不是将 div 包装在 ul 元素中。你可以做这样的事情

<ul class="class1">
 <li class="child1">
   <ul>
     <li>item1</li>
     <li>item2</li>
     <li>item3</li>
   </ul>
 </li>
<ul>

【讨论】：

你也可以在
中嵌套

【解决方案4】：

你可以像ul-> li -> div这样在下面使用div标签，因为你只能在ul标签之后使用li标签，你的代码会运行良好但会出现验证错误

所以你可以这样使用

 <ul>
     <li>
         <div></div>
     </li>
 </ul>

【讨论】：

【解决方案5】：

没有。如果你想要有效的标记，那么 div 永远不应该在 a 内，抱歉。一些现代浏览器会在您打开 div 之前“自动关闭” ul 标签，因此请注意

【讨论】：

【解决方案6】：

HTML unordered list element <ul> 表示一个无序列表，即没有数字顺序的项目的集合，它们在列表中的顺序是没有意义的。通常，无序列表项用项目符号显示，项目符号可以有多种形式，如点、圆形或方形。项目符号样式不是在页面的 HTML 描述中定义的，而是在其关联的 CSS 中使用 list-style-type 属性定义的。

允许的内容：

zero or more <li> elements

【讨论】：