最稳解法是ul设display: flex并让li设flex: 1，使子项均分容器宽度、忽略内容尺寸；需配合list-style: none和align-items统一交叉轴对齐，gap控制间距更干净，ie11需回退margin。
直接用 display: flex + flex: 1 是最稳、最现代的解法，IE11 及以上全支持，无需 hack，也不依赖 HTML 结构缩写或字体大小技巧。
ul 设置 display: flex 后，li 等分宽度的关键参数
只设 display: flex 不够，必须配合子项的弹性行为：
-
flex: 1是核心：它等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0，让每个li忽略自身内容宽度，均分父容器剩余空间 - 避免写
width: 20%这类硬编码——列数一变就得改 CSS，且小数百分比在某些浏览器下会累积误差 - 如果部分
li需固定宽度（如 logo 或搜索框），单独设flex: 0 0 auto或width: 120px，其余仍用flex: 1
为什么 inline-block + font-size: 0 失效？尤其在 UC 浏览器
这个老方案本质是“骗”浏览器把换行符和空格当零宽字符处理，但 UC 内核对 font-size: 0 的解析不一致，空格间隙依然存在。更麻烦的是：
- HTML 源码里换行/缩进会真实产生空白节点，
font-size: 0并不能消除所有渲染影响 - 子元素若设了
vertical-align: top，基线对齐可能引发意外错位 - 一旦
li里有input或button，它们的默认font-size会被继承重置，导致控件文字不可读
gap 和 margin 在 li 间距控制上的实际差异
gap 是 flex / grid 布局专用间距属性，比传统 margin-right 更干净：
-
gap: 12px会在每对相邻li之间加 12px，首尾不额外留白；而margin-right: 12px会让最后一个li多出 12px 右边距，常需:last-child { margin-right: 0 }补救 - IE11 不支持
gap（仅支持flex，不支持gap），此时得回退到margin-right+:last-child - 如果
li本身有padding或border，gap不受其影响，计算更可预期
list-style 和伪元素在 flex 布局下的隐藏风险
哪怕用了 display: flex，li 默认的圆点标记仍可能溢出或遮挡内容，尤其当设置了 padding-left：
-
list-style: none必须显式声明，不能指望 flex 自动禁用装饰 - 别依赖
list-style-position: inside来“塞”圆点进内容区——它在 flex 下行为不稳定，不同浏览器裁剪方式不同 - 真需要自定义标记（如图标或数字），用
::before伪元素 +content更可控，且能统一颜色/尺寸/对齐
真正容易被忽略的点是：flex 等分只作用于主轴方向，如果 li 内容高度不一致，视觉上会显得“不齐”，这时得加 align-items: center 或 align-items: stretch 统一交叉轴对齐，而不是调 line-height 或 vertical-align。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
