最稳妥方案是给 ul 设 display: inline-flex 并配合 flex-wrap: wrap 实现横向排列与响应式换行，同时需重置 padding-left: 0 和 list-style: none，避免浮动、inline-block 等旧方案的间隙、塌陷与维护问题。
用 display: inline-flex 让 ul 横向排列最稳妥
直接给 ul 设 display: inline-flex，再给 li 设 margin 控制间距，能避免浮动遗留问题、不破坏文档流，且支持响应式断行（配合 flex-wrap: wrap）。
常见错误是只设 display: inline 或 float: left：前者让 li 无法设宽高和垂直对齐，后者需清浮动且易塌陷；inline-block 则有空白符间隙问题，要靠字体大小 hack。
-
ul加list-style: none去掉默认圆点 -
li加margin-right（最后一项用:last-child去掉右距更干净） - 需要换行时，
ul加flex-wrap: wrap，并设max-width或容器约束
ul 里 li 宽度不均时怎么对齐
横向排列后若内容长短不一，li 默认按内容撑开，视觉松散。加 flex: 1 或固定 width 可统一宽度，但要注意：
-
flex: 1会让所有li等分父容器宽度，适合导航菜单 - 设
width: 200px需配合flex-shrink: 0防压缩，否则小屏下会挤变形 - 文字居中用
text-align: center，垂直居中用align-items: center（在ul上设）
移动端适配时 ul 横向滚动还是换行
小屏下强行横向排列常导致内容溢出或用户需左右拖拽，体验差。优先用 flex-wrap: wrap 换行，仅当业务明确要求横向滚动（如商品标签栏）才启用滚动：
- 横向滚动方案：给
ul加overflow-x: auto、white-space: nowrap，li设display: inline-block或flex-shrink: 0 - 必须加
-webkit-overflow-scrolling: touch提升 iOS 滚动流畅度 - 滚动条干扰 UI？用
::-webkit-scrollbar { display: none; }隐藏（仅 WebKit）
为什么不用 float 或 inline-block
老方案仍有项目在用，但坑多：float 必须额外清理父容器高度，inline-block 的换行符空格会变成约 4px 间隙，删 HTML 换行或设 font-size: 0 再重置子元素字体，维护成本高。
现代浏览器都支持 Flexbox，display: flex 对 ul 的兼容性已无风险（IE11+ 支持，如需支持 IE10 用 display: -ms-flexbox 前缀）。
真正容易被忽略的是：别忘了给 ul 设 padding-left: 0 —— 浏览器默认的 ul 左内边距会把第一项顶偏，横向排列时特别明显。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
