如何让有序列表编号左对齐而非默认的右对齐？

问题说明 #

默认HTML有序列表（<ol>）的编号是右对齐的，当编号位数增加（比如从9到10、99到100）时，编号会占用更多左侧空间，导致列表内容的起始位置偏移，破坏页面布局。我们需要实现编号左对齐，且不同位数的编号占据相同宽度，保持内容起始位置一致。

效果对比 #

• 期望效果：

1. hello
2. x
...
9. x
10. I am left aligned.
...
99. x
100. I am left aligned.

• 默认效果：

1. hello
    2. x
    ...
    9. x
   10. I am right aligned.
   ...
   99. x
  100. I am right aligned.

解决方案 #

以下两种CSS实现方式都能达到需求，可根据实际场景选择：

方法1：使用::marker伪元素（推荐，现代浏览器支持）

直接修改默认列表编号的对齐方式和宽度，代码简洁：

ol {
  /* 左侧内边距预留编号空间，可根据最长编号长度调整 */
  padding-left: 30px;
}

ol li::marker {
  /* 设置编号左对齐 */
  text-align: left;
  /* 固定编号宽度，确保不同位数编号占据相同空间 */
  display: inline-block;
  width: 25px;
}

方法2：自定义计数器（兼容性更好，适合旧环境）

通过CSS计数器完全自定义编号样式，精准控制位置：

ol {
  /* 重置计数器 */
  counter-reset: list-counter;
  /* 移除默认列表样式 */
  list-style: none;
  /* 左侧内边距预留编号空间 */
  padding-left: 30px;
}

ol li {
  /* 递增计数器 */
  counter-increment: list-counter;
  /* 相对定位，用于放置编号 */
  position: relative;
}

ol li::before {
  /* 生成编号内容 */
  content: counter(list-counter) ".";
  /* 绝对定位到左侧 */
  position: absolute;
  left: -25px;
  /* 编号左对齐 */
  text-align: left;
  /* 固定编号宽度 */
  width: 20px;
}

说明 #

• 调整padding-left和宽度值时，需根据你列表中最长编号的位数（如3位数就留足够空间）来设置，确保编号不会挤压内容。
• 两种方法都能保证编号左对齐，且列表内容的起始位置始终一致，不会因编号位数变化而打乱布局。

内容的提问来源于stack exchange，提问作者Lance Pollard