如何修复等宽字体下有序列表的数字位置偏移问题

当在使用等宽字体的表格中放置有序列表时，十进制标记会比无序列表的项目符号靠左偏移，这是浏览器默认对齐规则导致的差异——有序列表的数字标记默认左对齐，而无序列表的符号默认居中，等宽字体的固定宽度会放大这种视觉差。

下面是两种可行的解决方法：

方法1：用::marker调整标记对齐（推荐现代浏览器） #

通过CSS的::marker伪元素直接修改有序列表标记的对齐方式，让数字右对齐，匹配项目符号的居中位置：

ol li::marker {
  text-align: right;
  /* 可选：微调右侧间距，让视觉位置更一致 */
  margin-right: 0.2em;
}

将这段代码添加到你的样式表中，就能快速让两种列表的标记对齐。

方法2：自定义计数器（兼容旧版浏览器） #

如果需要支持不兼容::marker的旧浏览器，可以用CSS计数器完全控制标记的位置：

ol {
  counter-reset: list-num;
  list-style: none;
  padding-left: 1.8em; /* 为自定义标记预留空间 */
}

ol li {
  position: relative;
}

ol li::before {
  content: counter(list-num) ".";
  counter-increment: list-num;
  position: absolute;
  left: -1.4em; /* 和原列表的左侧内边距对应 */
  text-align: right;
  width: 1.2em; /* 为多位数数字预留足够宽度 */
}

这种方式彻底替代了浏览器的默认标记，确保在任何字体环境下都能和无序列表对齐。

原问题偏移情况 #

内容的提问来源于stack exchange，提问作者Eugene Tsakh