HTML中使用ul标签创建无序列表的方法
作者：袖梨
2026-06-07
ul标签必须严格嵌套li，li不能脱离ul存在；list-style-type仅对display:list-item生效；横向布局优先用flex；清符号用list-style:none；自定义图标需重置padding-left并调整background-position；ul/li具有不可替代的语义价值。
ul 标签本身不渲染内容，必须配合 li 才能形成有效列表；单独写 li 而不包裹在 ul 中，浏览器会自动补全但行为不可控，结构和语义都会出问题。
ul 和 li 必须严格嵌套，不能省略或错位
常见错误是把 li 直接丢在 body 或其他容器里，比如：
<body> <li>苹果</li> <li>香蕉</li></body>
浏览器可能补成一个无样式 ul，也可能塞进前一个列表末尾——CSS 选不到、屏幕阅读器读错、打印样式错乱。正确写法只有一种：
-
ul是唯一合法父容器，所有li必须直接子元素 - 嵌套子列表时，
li内部可以再放一个ul，但不能把ul放到ul外面再包li - 空
ul（<ul></ul>）合法，但不渲染任何东西，别指望它占位
list-style-type 不生效？先检查 display 值
list-style-type 只对 display: list-item 生效，而 li 默认就是这个值。一旦你给 li 设了 display: flex、display: inline-block 或 display: grid，圆点/方块就立刻消失——不是 CSS 写错了，是元素类型变了。
立即学习“前端免费学习笔记（深入）”；
- 横向排列列表，优先用
ul { display: flex }+li { margin-right: 1em }，保留li的默认 display - 若必须改
li的 display，记得手动加回list-style-position: inside和vertical-align: top对齐符号 - 清符号用
list-style: none，比只设list-style-type: none更彻底（它同时清除图片和位置）
自定义图标时 padding-left 容易漏调
用 background-image 替换项目符号很常见，但默认 ul 有 padding-left: 40px，不重置会导致图标和文字重叠或缩进过深。
- 先写
ul { list-style: none; padding-left: 0; } - 再给
li加background: url(icon.png) no-repeat left center和padding-left: 24px（留出图标空间） - 注意
background-position中的left center依赖行高，如果line-height很小，图标可能上下偏移
最常被忽略的是语义完整性：用 div + p 模拟列表，视觉上可能一样，但对键盘导航、屏幕阅读器、SEO 都是硬伤——ul/li 不只是加个点，它明确告诉浏览器“这是一组并列项”，这个信号没法靠 CSS 补回来。
