有序列表数字与文本未对齐问题求助（附CSS及HTML代码）

嘿，我明白你折腾了好久还是没搞定这个列表对齐的问题，咱们来拆解一下问题所在，然后给你调整后的代码方案～

问题根源分析 #

你当前的CSS里有几个关键点导致了对齐异常：

• ol设置了padding: 0，这会移除有序列表默认的左侧内边距，导致列表数字和文本挤在一起，没有足够的显示空间；
• ol li使用了float: left，浮动会破坏列表的默认布局流，干扰数字的定位；
• a标签同时用了float: left和display: flex，这两个布局属性叠加会产生冲突，影响元素的正常排列。

调整后的CSS代码 #

ol { 
  margin: 0; 
  padding-left: 2.5em; /* 给列表数字留出足够的显示空间 */
  width: auto; 
}
ol li { 
  /* 去掉float:left，恢复列表的正常布局流 */
  margin: 0; 
  background: #e5e5e5; 
  width: 100%; 
}
ol li a { 
  /* 去掉float:left，保留flex实现垂直居中 */
  color: #000; 
  text-decoration: none; 
  padding: 0 20px; 
  height: 50px; 
  font-size: 14px; 
  display: flex; 
  align-items: center; 
  width: calc(100% - 40px); /* 确保链接占满li宽度，同时保留左右内边距 */
}
#currentSide a { 
  color: #fff; 
  background: #05668d; 
}
ol li a:hover { 
  color: #fff; 
  background: #05668d; 
}
.leftInfoBox { 
  width: 240px; 
  top:0; 
  margin: 10px; 
  padding-bottom: 20px; 
  float: left; 
}

关键修改说明 #

1. 给ol添加padding-left：这是让列表数字和文本分开的核心，2.5em的数值可以根据你的字体大小微调，确保数字不会和文本重叠；
2. 移除ol li的float:left：浮动在这里完全没必要，反而会打乱列表的默认排版逻辑；
3. 简化a标签的布局属性：去掉冲突的float:left，只保留display:flex来实现文本垂直居中，同时保证链接区域占满整个li的宽度；
4. 简化激活/hover状态的样式：因为a标签已经设置了宽度，所以激活和hover状态不需要重复设置宽度，只需要修改背景和文字颜色即可。

这样调整后，有序列表的数字就能和文本正常对齐，同时保留你原本想要的背景色、垂直居中、hover效果等功能啦～

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