CSS 列表页样式：别再让 ul 和 ol 只是“默认缩进”了

你有没有试过，打开一个列表页，发现所有 <ul> 都顶着左边边缘挤成一团，箭头歪斜、行距发紧、悬停毫无反馈？不是浏览器没渲染好，是你还没真正和 list-style 打过照面。

列表页不是装饰品，它是信息流的骨架。用户扫一眼标题、略过副标、靠视觉节奏判断哪块内容值得停留——而这个节奏，80% 由列表项的间距、符号、对齐与交互质感决定。CSS 列表样式的关键，从来不是“怎么换图标”，而是“怎么让眼睛不费力地读下去”。

先说个常被忽略的事实：list-style 是个复合属性，但很多人只用 list-style-type，剩下两个字段（position 和 image）常年吃灰。结果就是符号总卡在文字里，缩进混乱，响应式一塌糊涂。

真正的控制权，在 list-style-position。
它只有两个值：inside 和 outside（默认）。差别看似微小，实则影响整个布局基线。outside 把符号画在内容框外，靠父容器 padding 撑开空间；inside 则把符号塞进内容框内，文字自动换行时会绕着符号走。多数 CMS 输出的 HTML 默认用 outside，但一旦加了 padding-left 或 margin-left，就容易出现符号“飘”在文字左侧、对不齐的尴尬。解决方法很简单：统一设为 list-style-position: inside;，再用 padding-left: 1.5em 精确控制缩进起点——符号和文字左缘从此严丝合缝。

符号本身，也早该跳出 disc/circle/square 的三件套。SVG 图标直接当 list-style-image 用，没问题，但要注意两点：一是必须带宽高（否则可能拉伸变形），二是要配 list-style-position: inside 才能自然对齐。更轻量的做法，是用伪元素 ::marker ——它专为列表符号设计，支持颜色、字体大小、甚至 transform。比如：

li {
  line-height: 1.6;
}
li::marker {
  content: "→";
  color: #4a6fa5;
  font-weight: 600;
}

你看，没动 HTML，没加额外标签，符号颜色和粗细已独立可控。::marker 的价值在于解耦：样式归样式，结构归结构，改个颜色不用翻 DOM 树。

说到结构，很多人忘了 <ol> 不只是数字序号。它天生携带语义权重——步骤、优先级、时间线。这时候，counter-reset 和 counter-increment 就派上用场了。比如做教程页，想让二级列表显示 “2.1”、“2.2”，而不是默认的 “1”、“2”：

ol {
  counter-reset: section;
}
ol > li {
  counter-increment: section;
}
ol > li::before {
  content: counters(section, ".") ". ";
  font-weight: 600;
  margin-right: 0.5em;
}

关键在 counters() 而非 counter()：前者支持嵌套层级，后者只认最外层。 这个细节，决定了你的多级列表是“看起来像步骤”，还是“真能表达步骤关系”。

列表页最易被忽视的，其实是“呼吸感”。一行列表项太密，用户会下意识跳过；太松，又显得空洞。行高（line-height）和项间距（margin-bottom）要错开设置：line-height 控制文字内部节奏，margin-bottom 控制项与项之间的留白。 推荐组合：line-height: 1.5 + margin-bottom: 0.75em。这样既保证单行可读性，又让视觉区块有明确分隔。

交互反馈也不能缺席。鼠标悬停时，光变色不够——加 1px 左侧边框比背景色变化更醒目，且不破坏原有行高。 因为背景色填充会挤压文字位置，而边框是“贴边生长”的：

li:hover {
  border-left: 2px solid #3b82f6;
  padding-left: calc(1.5em - 2px); /* 补偿边框占用空间 */
}

最后说个实战陷阱：响应式列表。小屏下，<ul> 的默认缩进常被压缩得只剩一点，符号几乎贴到屏幕边缘。与其死磕 padding-left 像素值，不如改用 ch 单位——它基于当前字体的 “0” 字宽度，天然适配字体缩放：

@media (max-width: 768px) {
  ul, ol {
    padding-left: 2ch; /* 符号+空隙，稳稳当当 */
  }
}

列表页不是“做完就行”的环节。它是一次无声的引导：告诉用户“这里有一组并列项”“这是执行顺序”“这部分值得你多看两眼”。当你把 ::marker 当作独立样式层，把 counters() 当作语义放大器，把 margin-bottom 和 line-height 分开调校——列表就从排版附属品，变成了信息架构的主动参与者。

下次写列表页，别急着敲 <ul>。先问一句：用户扫视时，第一眼落在哪儿？第二眼为什么停留？答案不在代码行数里，而在那 0.5em 的留白、那个精准的 inside、以及悬停时那一道不抢戏却够坚定的蓝边里。