自定义CSS样式有序列表文本换行至数字下方的修复方法咨询

嘿，我太懂这个问题有多闹心了！咱们先揪出问题根源，再快速把它搞定。

问题出在哪？ #

你现在用float: left来定位自定义数字的伪元素，再搭配text-indent: -1em调整文本位置——这种组合会让文本换行时脱离数字的对齐范围，直接跑到数字下面。因为float元素脱离了正常文档流，后续文本没办法跟着保持对齐节奏。

解决方案1：用Flexbox（推荐） #

Flexbox是现在布局的首选方案，能轻松搞定这种对齐问题，代码改动也不大：

ol.numbered-list { 
  counter-reset: item; 
  margin-left: 0; 
  padding-left: 0; 
}
ol.numbered-list > li { 
  counter-increment: item; 
  list-style: none; 
  margin: 30px 0; 
  font-size: 16px !important; 
  line-height: 1.3; 
  /* 用flex把数字和文本放进同一个弹性容器 */
  display: flex;
  align-items: flex-start; /* 让数字和文本顶部对齐 */
  gap: 20px; /* 数字和文本的间距，替代原来的margin-right */
}
ol.numbered-list > li:before { 
  content: counter(item); 
  padding: 8px; 
  border-radius: 50%; 
  width: 45px; 
  background: #fff; 
  border: 2px solid #01A7E5; 
  color: #01A7E5; 
  text-align: center; 
  font: 20px 'Open Sans', Helvetica, Arial, sans-serif; 
  font-weight: 800; 
  flex-shrink: 0; /* 防止数字框被文本挤变形 */
}

原理很简单：把li变成flex容器后，里面的伪元素和文本内容会自动在一行排列，文本换行时也会乖乖待在数字右侧，不会乱跑。flex-shrink:0还能保证你的圆形数字框不会被压缩变形。

解决方案2：用绝对定位（兼容旧浏览器） #

如果你需要兼容一些不支持flex的旧浏览器，可以试试绝对定位的方式：

ol.numbered-list { 
  counter-reset: item; 
  margin-left: 0; 
  padding-left: 0; 
}
ol.numbered-list > li { 
  counter-increment: item; 
  list-style: none; 
  margin: 30px 0; 
  font-size: 16px !important; 
  line-height: 1.3; 
  padding-left: 70px; /* 给数字框留出足够的空间 */
  position: relative; /* 让伪元素基于li定位 */
}
ol.numbered-list > li:before { 
  content: counter(item); 
  padding: 8px; 
  border-radius: 50%; 
  width: 45px; 
  background: #fff; 
  border: 2px solid #01A7E5; 
  color: #01A7E5; 
  text-align: center; 
  font: 20px 'Open Sans', Helvetica, Arial, sans-serif; 
  font-weight: 800; 
  position: absolute; 
  left: 0; /* 定位到li的左侧 */
  top: 0; /* 和文本顶部对齐 */
}

这种方法是给li左侧留好padding，然后把数字伪元素绝对定位到这个padding区域里，文本内容在padding内部，换行自然就会对齐数字右侧了。

随便选一种方法试试，都能完美解决文本换行跑到数字下面的问题！

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