HTML无序列表怎么创建？ul和li标签详解

常见错误现象：

• 永远用
  • 内容
  或
  1. 内容
  包裹
• 嵌套列表时，
• 内部才能放另一个
  ，不能把
  放在
  外面再塞
  • 空列表（
    ）是合法的，不会报错，但也不会渲染任何东西

  list-style-type 不生效？检查父级 display 和 list-item 的默认行为

  list-style-type 看似简单，但经常“设了没反应”。根本原因是：只有 display: list-item 的元素才响应这个属性，而

  • 默认就是它；一旦你给
  • 设了 display: flex 或 display: inline，圆点/数字就消失了——不是属性失效，是元素不再被视为“列表项”。

    使用场景：想让列表横向排列、加图标、或和按钮并排时，容易误删默认 display。

    • 横向列表别直接改
    • 的 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 更彻底

    无障碍与语义：ul/li 不只是换行加点，它传递层级关系

    屏幕阅读器靠

    和
    • 判断“这是一组并列选项”，会读出“列表，共 3 项”，然后逐条播报。如果用
      +

      模拟，哪怕加了 CSS 圆点，语义信息就丢了——对键盘用户、语音控制、SEO 都有隐性影响。

      性能 / 兼容性影响：语义标签本身零成本，但滥用 role="list" 或手动加 ARIA 属性反而可能干扰原生行为。现代浏览器对标准

      • 支持极好，IE8+ 都没问题。
        • 导航菜单、筛选标签、多选项目列表，优先用
          • ，别为了“更灵活”换成 div
          • 单个项不需要列表语义（比如只有一条提示文字），就别硬套
            • 避免嵌套过深：超过 3 层
              • • ... 会让阅读器迷失，也难维护

                自定义符号用 list-style-image 还是 ::marker？看兼容性和控制粒度

                list-style-image 老而稳，所有浏览器都支持，但只能换图，无法调大小、颜色、对齐；::marker 是新标准，能用 CSS 完全控制符号样式（比如 ::marker { color: red; font-size: 1.2em; }），但 Safari 15.4+、Chrome 99+ 才稳定支持。

                参数差异：list-style-image 接 URL，路径错就显示默认符号；::marker 只作用于

              • 前的伪元素，不支持背景图，但可结合 content: "→ " 插文本符号。
                • 要兼容 IE 或老安卓 WebView，坚持用 list-style-image: url(arrow.png)
                • 只需改颜色/大小/字体符号，用 ::marker 更干净，且不会因图片加载失败留白
                • list-style 简写会覆盖 ::marker，设完简写后又想用 ::marker，得确保简写没带 list-style-image 或 list-style-type
                事情说清了就结束。最常被忽略的是：ul/li 的语义价值远大于视觉表现，而 display 属性一动，符号就消失——这两点不盯住，后面所有样式和交互都容易偏航。

                今天关于《HTML无序列表怎么创建？ul和li标签详解》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！

      OpenClaw控制器自定义教程

      上一篇

      OpenClaw控制器自定义教程

      

      下一篇

      CSS让sticky元素覆盖兄弟元素的技巧