去除有序列表数字后的点后，如何修复列表文本对齐问题

问题分析 #

你当前用float: left实现自定义无点编号，导致文本换行时会跑到编号下方——这是因为float元素脱离正常文档流，无法为后续文本提供持续的缩进参考。另外注意HTML语义问题：<h2>不能作为<ol>的直接子元素，<ol>的合法子元素只有<li>，需先调整结构。

修复方案 #

步骤1：修正HTML结构

将标题移到<ol>外部：

<h2 class="uppercase title fs-500 text-mid">How to Play</h2>
<ol>
  <li class="fs-400">
    Red goes first in the first game.
  </li>
  <li class="fs-400">
    Players must alternate turns, and only one disc can be dropped in each turn. 
  </li>
  <li class="fs-400">
    The game ends when there is a 4-in-a-row or a stalemate.
  </li>
  <li class="fs-400">
    The starter of the previous game goes second on the next game.
  </li>
</ol>

步骤2：CSS修复（两种可选方案）

方案一：绝对定位伪元素（兼容性好）

利用position替代float，通过padding-left为编号预留空间，确保文本换行时保持缩进：

ol {
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
  counter-reset: customlistcounter; /* 每个ol独立重置计数器 */
}

ol > li {
  counter-increment: customlistcounter;
  position: relative;
  padding-left: 3em; /* 为编号留出宽度 */
}

ol > li:before {
  content: counter(customlistcounter) " ";
  font-weight: bold;
  position: absolute;
  left: 0;
  width: 3em;
  text-align: left;
}

方案二：Flex布局（现代浏览器推荐）

用Flex将编号和文本拆分为两个弹性项，文本换行时自动限制在自身区域：

ol {
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
  counter-reset: customlistcounter;
}

ol > li {
  counter-increment: customlistcounter;
  display: flex;
  align-items: flex-start; /* 确保文本与编号顶部对齐 */
}

ol > li:before {
  content: counter(customlistcounter) " ";
  font-weight: bold;
  width: 3em;
  flex-shrink: 0; /* 固定编号宽度，不被文本挤压 */
}

说明 #

• 移除了原CSS中ol:first-child的计数器重置，改为直接在ol上设置，避免多列表场景下计数器混乱。
• 两种方案都能实现文本换行时对齐第一行开头的效果，可根据项目兼容性需求选择。

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