HTML中使用ul标签创建无序列表的方法

时间：2026-06-07 10:38:47 编辑：袖梨来源：一聚教程网

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 补回来。

推荐专题

最新下载

热门教程

HTML中使用ul标签创建无序列表的方法

ul 和 li 必须严格嵌套，不能省略或错位

list-style-type 不生效？先检查 display 值

自定义图标时 padding-left 容易漏调

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程