掌握HTML列表项：li标签在不同容器下的表现-html教程-PHP中文网

li必须嵌套在ul、ol或menu中，孤立li会被浏览器移出父容器导致语义丢失；子列表ul必须完整写在li内部；li可嵌套任意合法html元素，但不可在ul与li间插入其他标签；修改display值会取消项目符号，需手动补全样式。

掌握html列表项：li标签在不同容器下的表现

li只能出现在
、

、内部，不能直接丢在里

浏览器不会报错，但会自动把孤立的li“拎”到最近的合法父容器外——比如<li>首页</li>会被修正为<li>首页</li>（即li脱离任何列表），语义彻底丢失。W3C 验证器明确报错：Element li not allowed as child of element body in this context。

必须确保每个li都严格嵌套在以下三者之一中：

ul（无序列表）
ol（有序列表）
menu（已废弃但部分浏览器仍支持，不推荐新项目使用）

别指望“看起来一样就行”，屏幕阅读器和搜索引擎只认结构，不看渲染结果。

嵌套子列表时，`ul`必须完整写在`li`标签内部

这是最容易出错也最影响可访问性的点。错误写法：<ul> <li>水果</li> <ul><li>苹果</li></ul> </ul>——子ul没包在li里，浏览器会把它塞到第一个li外面或自动闭合父ul，DOM 树直接错位。

正确结构只有一种：<ul><li>水果<ul><li>苹果</li></ul> </li></ul>

验证方法很简单：打开开发者工具，展开 DOM 树，确认每个子ul节点确实位于某个li节点内部，且没有被浏览器“纠错”挪走。

`li`里能放什么？div、p、a、甚至另一个`ul`都合法，但别塞错位置

li不是“内容容器”，而是“边界标记”。它允许嵌套任意合法 HTML，比如：

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

<li>@#@#@#@#@#@#@#@#@#@0</li>（导航必备）
<li> <p>说明文字</p> <ul><li>子项</li></ul> </li>（带描述的复合项）
<li> <img src="icon.png">图标项</li>

但严禁在ul和li之间插东西，例如：<ul> <div>错误</div> <li>正确</li> </ul>——div会导致 HTML5 验证失败，CSS 选择器如ul > li也会失效。

用 CSS 改`li`的`display`，项目符号就没了

li默认是display: list-item，符号靠这个值驱动。一旦你设成display: flex、display: inline-block或display: grid，符号立刻消失——不是样式没生效，是元素类型变了。

如果真要改显示方式，得手动补两件事：

加list-style-position: inside（否则符号可能跑出容器）
加vertical-align: top（避免多行时上下错位）
更稳妥的做法：保留li的display: list-item，把布局逻辑交给父级ul，比如ul { display: flex; } + li { margin-right: 1em; }

清符号别只写list-style-type: none，用list-style: none——它同时清除符号、自定义图片和位置声明，更彻底。

真正难的不是闭合标签，而是每次写li前问一句：这个内容是不是一组独立、可被键盘聚焦、可被屏幕阅读器单次播报的并列项？如果不是，换div或section可能更合适。