inline-block是横向平铺最稳的“老派”方案，因其不脱离文档流、支持宽高、兼容IE8+，且比float免清除浮动、比flex免前缀降级；但默认因HTML换行符生成4px间隙，需用font-size:0配合子元素重设字号修复，并统一设置vertical-align:top确保对齐。
为什么 inline-block 是横向平铺最稳的“老派”方案
它不脱离文档流、支持宽高、兼容 IE8+，比 float 少一堆清除浮动的麻烦，又不像 flex 在旧项目里要加前缀或降级处理。但默认会吃掉 HTML 换行符生成 4px 间隙，这是几乎所有新手卡住的第一步。
inline-block 元素间 4px 间隙的真实来源和修复方式
不是 CSS bug，是浏览器把 HTML 中的换行符、空格当成了文本节点（类似一个空格字符），而这个空格的宽度 ≈ 父容器 font-size 的 0.25 倍。16px 字体下就是 4px。
- 最推荐：给父容器设
font-size: 0，再单独给子元素重置字号，比如li { font-size: 14px; } - 次选：HTML 中让标签紧贴写，如
<li>首页</li> <li>关于</li> <li>联系</li>，但可读性差，协作时容易出错 - 别用
margin-left: -4px硬拉——不同字体、缩放比例下间隙会变，不具普适性
vertical-align 不设就错位，这不是可选项
inline-block 元素默认按基线（baseline）对齐，只要里面有文字、图片或行高不一致，就会出现上下参差。尤其混排 img 和 span 时特别明显。
- 统一加
vertical-align: top或vertical-align: middle，推荐前者，行为更确定 - 如果用了
font-size: 0修复间隙，vertical-align依然要设，否则对齐逻辑照常生效 - 注意：这个属性必须写在子元素上，不是父容器
ul + li 横向菜单必须清的三样默认样式
直接给 ul 加 display: inline-block 很容易漏掉默认样式干扰，导致左侧缩进、圆点残留、间距失控。
立即学习“前端免费学习笔记（深入）”；
- 干掉列表符号：
list-style: none - 清掉默认内边距：
padding: 0（尤其ul默认有padding-left: 40px） - 清掉外边距：
margin: 0（避免和其他元素意外粘连） - 额外提醒：
a标签得设display: block，不然点击热区只覆盖文字，不是整个菜单项
真正难的不是让元素横过来，而是横完之后它们还听你的话——等宽、对齐、不换行、响应式收缩时不挤破容器。这些细节里，font-size: 0 和 vertical-align 最容易被跳过，但一漏就全盘偏移。
