inline-block是横向导航常用选择，因其不脱离文档流、兼容IE8+且比float更可控，但存在HTML换行导致的空白间隙问题，需用font-size:0等方案消除。
为什么 display: inline-block 是横向导航的常用选择
它比 float 更可控，不脱离文档流，也不像 flex 那样需要父容器强干预；适合简单、兼容性要求稍高的场景（IE8+）。但要注意默认有空白间隙——这是由 HTML 中换行符和空格被渲染成空格字符导致的，不是 CSS 本身的问题。
常见错误现象：nav 里的 a 或 li 看起来“卡顿”“错位”“最后一项掉到下一行”，大概率是这个间隙撑开了宽度。
- 使用场景：纯静态导航、CMS 模板中需兼顾旧浏览器、或作为
flex的降级方案 - 性能影响极小，无重排开销，但间隙处理不当会导致布局意外折行
- 兼容性好，IE8 开始支持
inline-block
怎么消除 inline-block 元素间的空白间隙
根本原因是 HTML 源码里标签之间的换行/空格被当作文本节点渲染。解决方式不是“删空格”，而是让它们不参与布局。
实操建议：
- 父容器设
font-size: 0，子元素再单独设字体大小（如a { font-size: 16px; }） - 把 HTML 标签写成连写形式（如
<li><a>首页</a></li> <li><a>关于</a></li>），牺牲可读性换效果 - 用注释“吃掉”空白：
<li>...</li><!--<br>--><li>...</li>
（不推荐，维护成本高）
<nav>
<ul style="font-size: 0;">
<li style="font-size: 16px; display: inline-block;"><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">首页</a></li>
<li style="font-size: 16px; display: inline-block;"><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">产品</a></li>
<li style="font-size: 16px; display: inline-block;"><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">联系</a></li>
</ul>
</nav>
为什么不能只对 a 设 inline-block 而忽略 li
因为语义上导航项是列表项（li），不是链接本身。若只给 a 设 inline-block，li 仍是块级，默认独占一行，a 只是在那一行里变宽了，整体还是纵向堆叠。
正确做法是让容器（li）变成行内块，或者直接扁平化结构（去掉 ul/li，只用 nav 包 a）。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 保留语义就操作
li：设display: inline-block，并清除默认list-style和margin/padding - 追求简洁可操作
a：父nav设text-align: center，子a设display: inline-block，再统一加padding - 注意垂直对齐：
vertical-align: middle常需显式设置，否则基线对齐会让高度不一致
横向导航的点击区域和响应式退化怎么处理
inline-block 导航在小屏下容易挤出横向滚动条或文字折行，且默认 a 的点击热区仅限文字，不够友好。
关键点：
立即学习“前端免费学习笔记（深入）”；
- 给
a加padding扩展点击区域，不要只依赖line-height - 用
white-space: nowrap防止文字内部折行（但要配合overflow: hidden或自适应省略） - 响应式断点里，别硬撑横向布局：用媒体查询切回
display: block，配合text-align: center变成竖向菜单 - 移动端慎用
font-size: 0方案——缩放时可能触发字体重置异常
