最稳妥方案是 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标签写成紧凑格式（如- ...
- ...
— 用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+），这是最干净的解法：一行代码解决排列、对齐、间距、换行全部需求。
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 也不用皱眉——先让它动起来，再想怎么替掉。 
