CSS自定义彩色列表项导致长文本换行错位 如何让文本统一对齐

你当前的实现中，自定义圆点是作为普通内联元素存在于文本流里的，没有给列表项预留独立的圆点占位空间：一旦列表项文本过长换行，伪元素只会在第一行文本前占位置，后续换行的内容没有对应的缩进空间，就会直接顶到列表项的最左边缘，造成排版错位。

要让所有文本（包括换行后的内容）统一对齐到圆点右侧的固定位置，核心是给列表项预留固定的左侧占位区域，让圆点脱离正常文本流放置在这个区域里，两种常用实现方式都可以达到稳定的排版效果：

方式1：绝对定位+固定内边距（兼容性最好） #

调整后的CSS代码如下：

.bullet {
  list-style: none;
  /* 清除ul默认的左内边距，避免出现多余间距 */
  padding-left: 0;
}

.bullet li {
  /* 给li预留固定的左侧空间，宽度匹配「圆点宽度+圆点到文本的间距」 */
  padding-left: 22px;
  /* 开启相对定位，作为伪元素的定位参照 */
  position: relative;
  /* 可根据页面整体行高调整，让圆点和文本垂直居中对齐 */
  line-height: 1.6;
}

.bullet li::before {
  content: "\2022";
  color: #11AAE2;
  /* 把圆点从正常文本流移出，避免干扰文本排版逻辑 */
  position: absolute;
  /* 调整圆点在左侧占位区的水平位置，和你之前设置的圆点宽度匹配 */
  left: 10px;
  /* 微调垂直位置，让圆点和第一行文本的中线对齐 */
  top: 0.35em;
}

方案生效的逻辑：

• li上的padding-left是固定占用的布局空间，不管文本如何换行，所有正文内容都会从padding的右边缘开始排列，不会出现顶到最左的错位问题
• 绝对定位的圆点固定在左侧占位区，不会随着文本流移动，位置始终稳定

方式2：Flex布局实现（调整更灵活） #

如果不想手动计算占位区宽度，可以把列表项设为弹性布局，让圆点作为独立的固定子项存在：

.bullet {
  list-style: none;
  padding-left: 0;
}

.bullet li {
  display: flex;
  /* 控制圆点和文本的水平间距，和你之前设置的margin-right效果一致 */
  gap: 12px;
}

.bullet li::before {
  content: "\2022";
  color: #11AAE2;
  /* 禁止圆点子项收缩，保持固定宽度 */
  flex-shrink: 0;
  /* 垂直对齐文本的基线，避免圆点位置偏移 */
  align-self: baseline;
}

这种方案不需要手动设置固定缩进值，弹性布局会自动保证圆点和文本的位置稳定，哪怕文本换行，所有行的内容都会自动对齐到圆点右侧的固定位置。所有位置参数都可以根据实际视觉效果微调，比如调整gap值控制圆点和文本的距离，调整left值控制圆点离列表边缘的距离，只要对齐线统一即可。

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