合法。html5明确规定li可嵌套任意合法内容，div作为其直接子元素完全合规；而ul直接包含div属非法嵌套，会导致浏览器纠错、验证报错及无障碍问题。

li 里直接放 div 合法吗

完全合法。HTML5 明确允许 li 作为容器承载任意内容，div 是其中最常用的一种嵌套方式。浏览器不会纠错、校验器不报错、屏幕阅读器能正确识别项数和层级——只要 div 是 li 的直接子元素或更深一层的后代，结构就合规。

ul 里直接放 div 会怎样

非法，且后果不可靠。HTML5 规定 ul 的直接子元素只能是 li、ul 或 ol。一旦写成 <ul><div>...</div></ul>：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• W3C 验证器报错：Element div not allowed as child of element ul
• 浏览器自动修复 DOM：多数情况下会把 div 移到 ul 外部，变成兄弟节点，导致 JS 查找失败、CSS 选择器失效
• 无障碍工具可能跳过该区域，键盘导航顺序错乱
• 服务端渲染时，输出的 HTML 与预期结构不一致，后续逻辑易出 bug

什么时候该在 li 里用 div

不是“能不能”，而是“值不值得”。常见合理场景包括：

• 需要为整项内容加统一 padding/margin 或背景色，但又不想影响 li 默认的 list-style 位置 —— 用 <li><div class="item-wrapper">...</div></li>
• 内部需 flex/grid 布局，而 li 本身不设 display 属性（避免干扰列表语义）—— 把 display: flex 放在 div 上更可控
• 要包裹多个语义块（如标题 + 描述 + 操作按钮），且这些块之间无明确语义标签可替代（比如不用 article 或 section）
• 需要添加动画容器或过渡 wrapper，例如 <div class="fade-in">，而不希望动到 <code>li 标签本身

  容易踩的坑：嵌套过深或职责模糊

  一个 li 里套三层 div 不违法，但大概率是设计信号异常：

  • CSS 选择器变成 li .wrapper .content .text，改个颜色得翻三屏
  • JS 用 document.querySelector('li .inner .title') 返回 null，其实是中间某层 div 被删了或 class 拼错
  • 如果某层 div 既没 class、也没 id、更没内联样式，它就是冗余的，应该删掉
  • 想用 div 替代 h3 或 p？优先选语义标签——它们自带默认样式、可访问性支持、SEO 友好，比纯 div + CSS 更轻量
  真正该盯住的不是语法是否通过，而是每一层嵌套有没有不可替代的理由。很多“布局问题”，源头不在怎么嵌，而在为什么嵌。