如何让CSS浮动列表元素保持原有的垂直位置不发生上移偏移

• 核心原因1：li设置浮动后脱离正常文档流，父级ul默认无法被浮动元素撑高，出现高度坍塌，导致整个ul布局位置上移
• 核心原因2：ul作为inline-block元素，默认vertical-align值为baseline，和旁边字号更大的span对齐时基准错位，进一步放大了垂直偏移问题

给ul新增两个CSS属性即可解决：

1. 添加overflow: hidden触发BFC（块级格式化上下文），让父容器可以自动包裹内部浮动元素，避免高度坍塌
2. 添加vertical-align: middle指定行内块元素的垂直对齐基准，和旁边的span保持居中对齐

修改后的完整CSS代码如下：

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  display: inline-block;
  vertical-align: middle; /* 新增：对齐相邻文本 */
  overflow: hidden; /* 新增：包裹浮动元素，避免高度坍塌 */
}
li {
  display: inline-block;
  padding: 0 5px;
}

.number {
  float:right;
}
.rec {
  float: left;
}

如果不想通过BFC包裹浮动元素，也可以选择给ul显式设置和span匹配的行高，对齐效果一致：

ul {
  /* 原有属性不变 */
  line-height: 16px; /* 和span的font-size保持一致 */
  vertical-align: middle;
}

这种方案适合需要精确控制行高的场景，兼容性同样优秀。

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