17370845950

推荐用 display: flex 实现横向列表，只需在 ul 上设置 display: flex 即可自动横向排列，支持响应式、等距对齐；float 方案需手动清浮动且兼容性差，仅适用于 IE8/9 等老旧环境。

用 display: flex 让列表横向排列最直接

不用改 HTML 结构，只在父容器（比如

）上加一行 CSS 就能实现横向排列，且默认自动对齐、等距、响应友好。

关键点：

• display: flex 必须作用于列表容器（
  ），不是
• 默认主轴是水平方向，所以
• 会自动横向排开
• 加 flex-wrap: wrap 可让超出时换行；加 justify-content: space-between 能控制间距分布
• 注意旧版 Safari 对 flex 的兼容性：iOS 9+、Safari 9+ 基本可用，但 iOS 8 及更早需加 -webkit- 前缀

ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}
li {
  margin-right: 16px;
}
li:last-child {
  margin-right: 0;
}

float: left 还能用，但要手动清浮动

它本质是“脱离文档流”的布局方式，适合老项目或需要兼容 IE8/9 的场景，但副作用明显。

常见问题：

• 父容器高度塌陷：必须给
  加 overflow: hidden 或伪元素清浮动（如 ::after + clear: both）
• 需设宽高或 white-space: nowrap，否则文字换行可能破坏横排效果
• 无法便捷控制对齐方式（比如让最后一行左对齐或居中），text-align 对 float 无效
• 响应式调整困难：媒体查询里要反复重置 float 和宽度

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow: hidden; /* 清浮动 */
}
li {
  float: left;
  margin-right: 16px;
}

横向列表该选哪个？看这三点判断

不是“新就一定好”，而是看实际约束条件：

• 要支持 IE10 以下？→ 只能用 float（flex 在 IE10 是部分支持，IE9 及以下完全不支持）
• 列表项宽度不固定、内容长短不一？→ flex 更稳，float 容易因换行错位
• 需要鼠标悬停时动态调整顺序（比如拖拽排序）？→ flex 的 order 属性可直接控制，float 得靠 JS 操作 DOM 位置

容易被忽略的细节：list-style 和 inline-block 的干扰

很多人试过 display: inline-block，结果每项之间有看不见的空隙——那其实是 HTML 中换行符和空格被渲染成空白字符导致的。这不是 bug，是规范行为。

而用 flex 或 float 时，list-style（小圆点、数字等）默认还在，容易误以为“没生效”。务必显式写 list-style: none。

另外：flex 下 vertical-align 无效，别试图用它调垂直对齐；要用 align-items 或 margin: auto。