如何巧妙运用HTML li标签打造独特布局效果？
- 内容介绍
- 文章标签
- 相关推荐
本文共计1022个文字，预计阅读时间需要5分钟。
浏览器中看到的是独立的 `` 标签内容。
常见错误现象：<li> 直接写在 <body> 里，以为能显示圆点，实际可能没缩进、没符号，甚至被压到页面顶部。
- 永远用
<ul>内容</ul>或<ol>内容</ol>包裹<li> - 嵌套列表时，内部才能放另一个
<ul>，不能把<ul>放在<ul>外面再塞<li> - 空列表
<ul></ul>是合法的，不会报错，但也不会渲染任何东西
list-style-type 不生效？先看 display 是否被改掉
list-style-type 只对 display: list-item 的元素生效，而 <li> 默认就是它；一旦你给 <li> 设了 display: flex 或 display: inline，圆点/数字就消失了——不是属性失效，是元素不再被视为“列表项”。
使用场景：想让列表横向排列、加图标、或和按钮并排时，容易误删默认 display。
立即学习“前端免费学习笔记（深入）”；
- 横向列表别直接改
<li>的display，优先用ul { display: flex }+li { margin-right: 1em } - 若必须用
display: inline-block，记得显式加回list-style-position: inside和vertical-align: top对齐符号 -
list-style: none是清空符号+位置+图片三合一，比只设list-style-type: none更彻底
嵌套列表要缩进书写，且语义层级不能超 3 层
嵌套本身合法，但可读性、可维护性和无障碍体验会随深度快速下降。屏幕阅读器靠 <ul>/<ol> 判断层级，超过 3 层容易迷失。
正确写法示例（缩进非强制但强烈建议）：
<ul> <li>一级项 <ul> <li>二级项 <ul> <li>三级项</li> </ul> </li> </ul> </li> </ul>
- 嵌套的
<ul>或<ol>必须完整位于父级<li>的开始与结束标签之间 - 不要用
<div>替代嵌套，否则语义断裂，role="list"等 ARIA 手动补救反而干扰原生行为 - 如果只是视觉分组（比如同一栏里两组标签），用两个独立
<ul>，而非一个<ul>套两层
value 和 type 属性已废弃，别再用
value（仅限 <ol>）和 type 属性在 HTML4.01 已被废弃，HTML5 完全不支持。现代实践中必须用 CSS 控制编号样式或起始值。
替代方案更可控、兼容性更好：
- 起始编号用
<ol start="5">，倒序用<ol reversed>（仅<ol>支持） - 字母/罗马数字编号优先用 CSS
counter-reset+::marker，比旧type="A"更灵活 - 自定义图标用
list-style-image或伪元素::before，后者控制粒度更高
真正容易被忽略的是：语义不是“看起来像列表”，而是“告诉浏览器和辅助技术这是什么”。哪怕你用 CSS 把 <ul> 渲染成横向导航栏，只要结构合规，读屏器仍会正确播报“列表，共 4 项”。这点在表单错误提示、筛选标签、多选菜单里尤为关键。
本文共计1022个文字，预计阅读时间需要5分钟。
浏览器中看到的是独立的 `` 标签内容。
常见错误现象：<li> 直接写在 <body> 里，以为能显示圆点，实际可能没缩进、没符号，甚至被压到页面顶部。
- 永远用
<ul>内容</ul>或<ol>内容</ol>包裹<li> - 嵌套列表时，内部才能放另一个
<ul>，不能把<ul>放在<ul>外面再塞<li> - 空列表
<ul></ul>是合法的，不会报错，但也不会渲染任何东西
list-style-type 不生效？先看 display 是否被改掉
list-style-type 只对 display: list-item 的元素生效，而 <li> 默认就是它；一旦你给 <li> 设了 display: flex 或 display: inline，圆点/数字就消失了——不是属性失效，是元素不再被视为“列表项”。
使用场景：想让列表横向排列、加图标、或和按钮并排时，容易误删默认 display。
立即学习“前端免费学习笔记（深入）”；
- 横向列表别直接改
<li>的display，优先用ul { display: flex }+li { margin-right: 1em } - 若必须用
display: inline-block，记得显式加回list-style-position: inside和vertical-align: top对齐符号 -
list-style: none是清空符号+位置+图片三合一，比只设list-style-type: none更彻底
嵌套列表要缩进书写，且语义层级不能超 3 层
嵌套本身合法，但可读性、可维护性和无障碍体验会随深度快速下降。屏幕阅读器靠 <ul>/<ol> 判断层级，超过 3 层容易迷失。
正确写法示例（缩进非强制但强烈建议）：
<ul> <li>一级项 <ul> <li>二级项 <ul> <li>三级项</li> </ul> </li> </ul> </li> </ul>
- 嵌套的
<ul>或<ol>必须完整位于父级<li>的开始与结束标签之间 - 不要用
<div>替代嵌套，否则语义断裂，role="list"等 ARIA 手动补救反而干扰原生行为 - 如果只是视觉分组（比如同一栏里两组标签），用两个独立
<ul>，而非一个<ul>套两层
value 和 type 属性已废弃，别再用
value（仅限 <ol>）和 type 属性在 HTML4.01 已被废弃，HTML5 完全不支持。现代实践中必须用 CSS 控制编号样式或起始值。
替代方案更可控、兼容性更好：
- 起始编号用
<ol start="5">，倒序用<ol reversed>（仅<ol>支持） - 字母/罗马数字编号优先用 CSS
counter-reset+::marker，比旧type="A"更灵活 - 自定义图标用
list-style-image或伪元素::before，后者控制粒度更高
真正容易被忽略的是：语义不是“看起来像列表”，而是“告诉浏览器和辅助技术这是什么”。哪怕你用 CSS 把 <ul> 渲染成横向导航栏，只要结构合规，读屏器仍会正确播报“列表，共 4 项”。这点在表单错误提示、筛选标签、多选菜单里尤为关键。