最稳妥方案是 display: inline-block，它支持垂直对齐、保留盒模型且不脱离文档流；现代项目推荐 flex，一行代码解决排列、对齐、间距与换行，兼容性需据实际用户环境权衡。

用 display: inline-block 更稳妥

直接设 li 为 display: inline-block 是目前最常用、副作用最小的方式。它天然支持垂直对齐（vertical-align）、保留盒模型（可设 margin/padding）、不脱离文档流，也不需要额外清理浮动。

• 必须给 li 显式设置 display: inline-block，父级 ul 默认无需改动
• 注意默认的换行符或空格会变成空白间隙，可用以下任一方式消除：
  — 父级 ul 设 font-size: 0，再给 li 单独设 font-size
  — 把 HTML 中 li 标签写成紧凑格式（如 <li>...</li> <li>...</li> 不换行）
  — 用 flex 替代（见下一条）
• 避免同时混用 float 和 inline-block，行为不可控

别用 float: left 做水平菜单了

float 是为图文环绕设计的，强行用于布局会引发父容器高度塌陷、需要清浮、响应式时难以控制等老问题。现代项目中除非兼容 IE7 及更早版本，否则没必要选它。

• 若坚持用 float，必须给父 ul 加清除（如 ::after 伪元素 + clear: both）
• float 元素会脱离文档流，导致后续兄弟元素上移，容易引发意外交互区域偏移
• 移动端缩放或字体放大时，float 排列容易错行，而 inline-block 或 flex 更稳定

推荐直接上 display: flex

如果目标浏览器支持 Flexbox（Chrome 29+、Firefox 28+、Safari 6.1+、Edge 12+），这是最干净的解法：一行代码解决排列、对齐、间距、换行全部需求。

Blog for Agents for Knowledge Sharing

在 AgentBlog（blog.agentloka.ai）上作为已认证 AI 代理发布博客文章，支持发布、编辑、删除、评论、浏览和阅读长篇内容。

下载

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

• 不用管空白字符问题，flex 完全无视 HTML 换行和空格
• 用 justify-content 控制整体对齐（如居中、右对齐），用 align-items 控制单行垂直居中
• 加 flex-wrap: wrap 可让列表项在窄屏自动折行，inline-block 得靠媒体查询手动调

兼容性取舍要看真实用户环境

不是所有项目都能无脑上 flex。比如企业内网系统仍需支持 IE10，那 inline-block 就是更现实的选择；若连 IE11 都已淘汰，flex 几乎没有理由不选。

立即学习“前端免费学习笔记（深入）”；

• 查 caniuse.com/flexbox 确认目标用户实际覆盖范围，别只看“公司说支持 IE11”就放弃 flex
• inline-block 在 IE8+ 全面支持，但 IE8 不支持 vertical-align: middle 对表单控件的精确对齐
• 真要兼容 IE7？那就只能用 float + 清除，但得接受维护成本高、响应式难做

用 flex 的人越来越多，不是因为时髦，是因为它把过去要十几行 CSS + JS 才能稳住的效果，压成了一行声明。但如果你正调试一个跑在税务专网里的老系统，看到 float 也不用皱眉——先让它动起来，再想怎么替掉。