CSS如何增大有序列表自定义编号与列表项文本的间距

原有写法的核心问题是将编号伪元素设为行内块元素与文本混排，文本换行时会默认填充行内块下方的空白区域，导致换行文本和编号同列。以下两种方案都不需要额外添加span等包裹标签，仅用ol、li配合CSS即可实现，且能保证编号圆形尺寸固定、圆角效果统一。

方案1：弹性布局实现（推荐） #

通过给li设置弹性布局，将编号和文本拆分为两个独立的弹性子项，从根源上避免文本绕排到编号下方。
完整代码如下：

ol {
  list-style: none;
  counter-reset: counter-function;
  padding-left: 0.5rem;
}

li {
  counter-increment: counter-function;
  margin: 0.25rem;
  /* 核心：设置弹性布局，编号、文本自动成为独立子项 */
  display: flex;
  align-items: flex-start;
  /* 控制编号与文本的间距，可按需调整数值 */
  gap: 0.75rem;
}

li::before {
  content: counter(counter-function);
  background: red;
  /* 固定编号尺寸，禁止被内容挤压变形 */
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  line-height: 2rem;
  color: white;
  text-align: center;
}

注意：flex-shrink: 0是保证编号圆形尺寸不被内容挤压变形的核心属性，请勿遗漏。

对应的HTML结构不需要任何修改，和原有写法完全一致：

<ol>
  <li>List item</li>
  <li>List item</li>
  <li>Longer List item Longer List item Longer List item Longer List item Longer List item Longer List item Longer List item Longer List item Longer List item Longer List item Longer List item Longer List item</li>
  <li>List item</li>
  <li>List item</li>
</ol>

该方案的优势：

• 无额外标签，完全符合仅使用ol、li实现的要求
• 编号圆形宽高固定，不会随列表项内容长度变化拉伸或压缩，圆角效果始终统一
• 换行文本自动对齐到文本区域左边缘，不会出现在编号所在列
• 间距调整简单，直接修改gap属性值即可控制编号和文本的距离

方案2：绝对定位实现 #

如果需要兼容更老旧的浏览器，可以用绝对定位把编号固定在列表项左侧，给列表项预留左侧内边距容纳编号，同样可以实现效果：

ol {
  list-style: none;
  counter-reset: counter-function;
  /* 左侧预留足够空间放置编号 */
  padding-left: 3rem;
}

li {
  counter-increment: counter-function;
  margin: 0.25rem;
  /* 作为编号伪元素的定位父级 */
  position: relative;
}

li::before {
  content: counter(counter-function);
  background: red;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  line-height: 2rem;
  color: white;
  text-align: center;
  /* 固定编号位置到列表项左侧 */
  position: absolute;
  left: -2.75rem;
  top: 0;
}

这个方案的效果和弹性布局方案完全一致，编号尺寸固定，换行文本自动对齐，也不需要额外标签。

之前使用table-layout方案出现圆形变形的问题，是因为table布局下的单元格默认会随内容自动调整宽度，没有给编号设置禁止收缩的属性，上述两个方案都规避了这个问题。

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