CSS3怎么让列表横向排列_flex布局和float对比【指南】

推荐用 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。