登录
首页 >  文章 >  前端

HTML中li列表项用法 HTML中li标签在布局中技巧

时间：2026-05-05 21:00:42 378浏览 收藏

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《HTML中li列表项用法 HTML中li标签在布局中技巧》，聊聊，希望可以帮助到正在努力赚钱的你。

  • 必须嵌套在
      或
        内，孤立使用会导致结构错乱、CSS失效、无障碍问题；嵌套层级建议≤3层；list-style-type仅对display:list-item生效；废弃value/type属性，改用CSS或HTML5属性控制。

    • HTML中li列表项用法 HTML中li标签在布局中技巧

    li 必须嵌套在 ul 或 ol 里，单独写会出问题

    浏览器看到孤立的

  • 会自动容错补全，但补得不可控——可能塞进前一个
      末尾，也可能新建一个无样式容器。结果就是结构错乱、CSS 选中失效、屏幕阅读器读错层级。

      常见错误现象：

    • 直接写在 里，以为能显示圆点，实际可能没缩进、没符号，甚至被压到页面顶部。

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

              list-style-type 不生效？先看 display 是否被改掉

              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 更彻底

              嵌套列表要缩进书写，且语义层级不能超 3 层

              嵌套本身合法，但可读性、可维护性和无障碍体验会随深度快速下降。屏幕阅读器靠

                /
                  判断层级，超过 3 层容易迷失。

                  正确写法示例（缩进非强制但强烈建议）：

                  <ul>
  <li>一级项
    <ul>
      <li>二级项
        <ul>
          <li>三级项</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
                  • 嵌套的
                      或
                        必须完整位于父级
                      1. 的开始与结束标签之间
                      2. 不要用
                        替代嵌套，否则语义断裂，role="list" 等 ARIA 手动补救反而干扰原生行为
                      3. 如果只是视觉分组（比如同一栏里两组标签），用两个独立
                          ，而非一个
                            套两层

                          value 和 type 属性已废弃，别再用

                          value（仅限

                            ）和 type 属性在 HTML4.01 已被废弃，HTML5 完全不支持。现代实践中必须用 CSS 控制编号样式或起始值。

                            替代方案更可控、兼容性更好：

                            • 起始编号用
                                ，倒序用
                                  （仅
                                    支持）
                                  1. 字母/罗马数字编号优先用 CSS counter-reset + ::marker，比旧 type="A" 更灵活
                                  2. 自定义图标用 list-style-image 或伪元素 ::before，后者控制粒度更高

                            真正容易被忽略的是：语义不是“看起来像列表”，而是“告诉浏览器和辅助技术这是什么”。哪怕你用 CSS 把

                              渲染成横向导航栏，只要结构合规，读屏器仍会正确播报“列表，共 4 项”。这点在表单错误提示、筛选标签、多选菜单里尤为关键。

                              文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《HTML中li列表项用法 HTML中li标签在布局中技巧》文章吧，也可关注golang学习网公众号了解相关技术文章。

      • 资料下载
      相关阅读
      更多>
      最新阅读
      更多>
      课程推荐
      更多>