最轻量方案是给li设display: inline-block，但需处理换行符导致的4px间隙，推荐ul设font-size: 0再重置li字号；更可控的是ul设display: flex配合flex-wrap等属性；float会引发父容器塌陷且不支持现代布局需求。
list-item 怎么用 inline-block 并排显示
直接给 li 设 display: inline-block 是最轻量的方案，但默认会有看不见的空白间隙——这是换行符和空格被渲染成文本节点导致的。不是 bug，是 HTML 解析规则。
常见错误现象：li 之间出现约 4px 的不可控缝隙，即使写了 margin: 0 也无效。
- 把
ul的font-size: 0，再单独给li设回正常字号（比如font-size: 16px） - 或者把
ul的所有子节点写在一行，删掉li标签间的换行和空格（不推荐，可维护性差） - 避免对
li使用vertical-align: baseline（默认值），改用top或middle，否则基线对齐会放大间隙感
flex 布局下 ul/li 的正确写法
用 display: flex 更可控，但别直接写在 li 上——应该设在父容器 ul 上。否则每个 li 变成独立 flex 容器，失去“列表项”语义和布局联动。
使用场景：需要等宽、居中、自动换行或响应式间距时，flex 比 inline-block 更可靠。
-
ul设display: flex，flex-wrap: wrap控制是否折行 - 用
justify-content调水平对齐（space-between、center等），不用text-align -
li默认是 flex item，不需要额外设display；若要等宽，可加flex: 1或固定width - 注意 Safari 旧版本对
flex: 1在li上的支持不稳定，建议用flex: 0 0 auto+ 显式width
为什么不能只靠 float:left
float 确实能让 li 并排，但它会让父 ul 高度塌陷——因为浮动元素脱离文档流。这不是“没写 clear”的问题，而是布局模型根本不同。
常见错误现象：ul 看起来高度为 0，背景色/边框消失，后续元素上移。
- 必须配合
overflow: hidden或伪元素::after { content: ""; display: table; clear: both; }才能撑开父容器 -
float不支持垂直居中、间隙控制、响应式重排，现代项目里纯属历史包袱 - 如果用了 CSS Grid 或 Flex 布局，再混用
float会导致意外交互（比如float会被忽略）
移动端要注意的兼容性细节
iOS Safari 12.2 之前不支持 flex-wrap: wrap 在 ul 上的某些组合行为；Android WebView 对 inline-block 的基线计算也有差异。
性能影响：大量 li 用 flex 时，若频繁增删，比 inline-block 触发更多 layout 计算，但日常几十项完全无感。
- 加
ul { -webkit-flex-wrap: wrap; flex-wrap: wrap; }覆盖老 iOS - 避免在
li上写width: calc(33.333% - 10px)这类复杂表达式，部分 Android 低版本解析出错 - 真要兼容 IE11？那就只能退回
inline-block+ 字体大小归零法，别碰flex
事情说清了就结束。真正麻烦的从来不是“怎么并排”，而是并排之后的对齐、换行、间隙、塌陷、缩放、语义——这些细节堆在一起，才让一个简单的列表变得需要反复调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
