如何让嵌套列表左外边距精确匹配数字加 的宽度？

解决方案 #

不需要手动设置固定像素的margin-left，可以通过CSS变量结合隐藏伪元素的方式，自动计算出「单个数字+全角空格（ ）」的宽度，让子列表的序号始终和父列表的文本对齐，完美适配任意字体。

修改后的完整代码如下：

CSS

* {
  margin: 0;
  padding: 0;
  font-family: Arial;
}

ol {
  counter-reset: item;
  list-style: none;
  /* 定义变量存储计数器占位宽度 */
  --counter-width: 0;
}

/* 生成隐藏的占位元素，计算"数字+全角空格"的宽度并赋值给变量 */
ol::before {
  content: "1 ";
  visibility: hidden;
  display: inline-block;
  --counter-width: 100%;
}

li {
  display: block;
}

li:before {
  content: counters(item, ".") " ";
  counter-increment: item;
}

/* 子列表使用计算好的宽度作为左外边距 */
ol li ol li {
  margin-left: var(--counter-width);
}

HTML

<ol>
  <li>Coffee
    <ol>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ol>
  </li>
  <li>Tea
    <ol>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ol>
  </li>
  <li>Milk</li>
  <li>Cool</li>
</ol>

原理说明 #

1. 通过ol::before生成一个内容为"1 "的隐藏元素，利用display: inline-block让它自动适应内容宽度，再通过CSS变量--counter-width把这个宽度传递出去。
2. 子列表的li直接使用这个变量作为margin-left的值，确保其左外边距和父列表中「数字+全角空格」的宽度完全一致，无论字体如何变化都能精准对齐。

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