li内可合法嵌套p、div、img、ul、ol等流内容，但禁止直接放入h1–h6、form、script或未包裹文本；嵌套列表必须置于li内部，否则导致语义断裂、编号重置及js节点获取失败。
ol 里能放的不只是纯文本，但必须遵守 HTML 嵌套规则——否则浏览器会自动纠错、内容错位、JS 获取不到节点，甚至影响屏幕阅读器。
哪些内容可以合法放在 li 里
HTML 规范允许 li 包含“流内容（flow content）”，实际开发中常见且安全的有：
-
p、div、span（需注意语义） -
strong、em、code等内联元素 -
img（带alt）、iframe（慎用） - 嵌套的
ul或ol（必须作为li的子元素，不能写在li外） - 表格
table（语义合理时可用，但会显著增加缩进和渲染复杂度）
禁止直接把 h1–h6、form、script 或未包裹的文本节点塞进 li 开头——部分浏览器会自动闭合 li，导致结构断裂。
li 里混排段落和列表的典型写法
常见需求：某一条目下既有说明文字，又有子步骤。正确结构是让所有内容成为 li 的直属子节点，而非“先写 p 再另起一个 ol”：
<ol type="A">
<li>
<p>确认患者是否符合入组标准</p>
<ol type="1">
<li>年龄 ≥ 18 岁</li>
<li>HIV 抗体检测阳性</li>
</ol>
</li>
<li>采集血样并离心处理</li>
</ol>
错误写法：<ol>...</ol>
<li> —— 这会让第二层 ol 被当成新列表，编号重置为 A.，且语义断裂。
CSS 控制混合内容的对齐与缩进
当 li 内含 p 或嵌套列表时，浏览器默认的 margin 和 padding 容易造成视觉混乱：
- 嵌套
ol或ul会自带左侧缩进，叠加父级li的缩进后可能过深；可统一用ol, ul { margin-left: 0; padding-left: 1.5em; }收敛 -
p默认上下边距会影响行高，建议重置：li > p { margin: 0.5em 0; } - 若想让项目符号与多行内容顶部对齐，加
li { display: flex; align-items: flex-start; }，但要小心破坏可访问性（部分读屏器依赖原生流式布局）
真正难处理的不是“能不能放”，而是“放完之后怎么让视觉节奏不崩、语义不丢、JS 能准确选中”。多数样式问题根源不在 CSS，而在 li 是否被意外截断或闭合遗漏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
