推荐用 display: flex 实现横向列表，只需在 ul 上设置 display: flex 即可自动横向排列，支持响应式、等距对齐；float 方案需手动清浮动且兼容性差，仅适用于 ie8/9 等老旧环境。
用 display: flex 让列表横向排列最直接
不用改 HTML 结构，只在父容器（比如 <ul></ul>）上加一行 CSS 就能实现横向排列，且默认自动对齐、等距、响应友好。
关键点：
-
display: flex必须作用于列表容器（<ul></ul>），不是<li> - 默认主轴是水平方向，所以
<li>会自动横向排开 - 加
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 的场景，但副作用明显。
常见问题：
立即学习“前端免费学习笔记（深入）”；
- 父容器高度塌陷：必须给
<ul></ul>加overflow: hidden或伪元素清浮动（如::after+clear: both） -
<li>需设宽高或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。
