HTML列表排版实用技巧分享

正确做法是：无序内容用

，有序步骤或排名用
，每个条目必须是
1. —— 浏览器默认有缩进、项目符号/编号，且天然支持 :first-child/:last-child/:nth-child 伪类。
   • 的 start 属性可设起始编号，比如
     5. 的 type 属性（如 type="square"）已不推荐，应交由 CSS 的 list-style-type 控制
        • 嵌套列表时，
        • 内直接跟
          或
          ，无需额外容器

          CSS 控制列表外观：绕开 list-style 的坑

          list-style 是简写属性，容易误覆盖。比如写 list-style: none; 会同时清空类型、位置和图像，但有时你只想隐藏符号、保留缩进。

          更稳妥的写法是拆解控制：

          • 去掉符号但保留缩进：list-style-type: none; + padding-left: 1.5em;
          • 用自定义图标替代默认符号：list-style: none; + background-image: url("arrow.svg"); + padding-left: 24px; + background-position: left center;
          • list-style-position: inside 让文字换行后对齐符号，但可能破坏块级布局；outside（默认）更稳定

          响应式列表排版：用 display: flex 替代浮动或 inline-block

          横向排列列表项（如导航菜单、标签云）时，老方案用 float: left 或 display: inline-block，但都带清除浮动或空白符问题。

          现代写法直接作用于

          ：

          ul.horizontal {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5em;
          }
          ul.horizontal li {
            margin: 0;
          }

          • gap 替代 margin 控制间距，避免首尾外溢
          • 加 flex-wrap: wrap 保证小屏自动折行
          • 务必重置 li 的默认 margin，否则 flex 下仍可能错位

          可访问性关键点：别让 role="list" 欺骗自己

          有人为自定义结构加 role="list"，以为能“模拟”语义。但若没配合同等语义的子元素（如 role="listitem"），或缺失键盘导航支持（Tab 键跳转、Enter 触发），反而干扰辅助技术。

          真正要做的只有两件：

          • 坚持用原生
            /
            /
            1. ，它们自带完整 ARIA 语义
            2. 若需点击交互，在
            3. 内包裹 或 ，而非给
               加 onclick
               避免用 aria-hidden="true" 隐藏列表符号——屏幕阅读器靠的是结构，不是视觉符号

            列表排版最易被忽略的，其实是语义与交互的耦合：一个看似简单的

          • ，既是内容单元，也是焦点管理的基本粒度。改样式前，先确认它还在正确说话。

            以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。

            前往漫画官网入口并下载 ➜
            您即将跳转至第三方网站，请注意保护好个人信息和财产安全！

            继续访问