用 flex 实现水平导航最稳：用 包 ， 设 display: flex； 需 block+padding 保证点击热区；gap 控间距；当前页高亮须 JS 动态判断路径。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
用
直接上手就用 <nav></nav> 包住 <ul></ul>，再给 <ul></ul> 加 display: flex —— 这是目前兼容性、可维护性、语义性三者平衡最好的方案。别碰 <table>，它不是导航的容器；也别用 <code><div class="nav">，语义缺失会导致读屏器跳过、SEO 权重稀释、键盘 Tab 顺序错乱。
<p>关键实操点：</p>
<ul>
<li>
<code><nav></nav> 必须是顶层容器，内部子元素优先用 <ul></ul>，每个导航项用 <li>，链接必须是 <a></a>（否则点击无效、悬停无响应）
<ul></ul> 上设 display: flex，不是给 <nav></nav> 自身设——否则子元素可能不是直接子项，flex 不生效gap: 1rem 控制间距，比 margin-right 更干净，自动避开末尾多余空隙<a></a> 必须加 display: block + padding，确保移动端点击热区 ≥ 44×44pxinline-block 方案能用但得防空白缝隙
如果项目要兼容 IE9 或更老环境，display: inline-block 是 fallback 选择，但它在 HTML 换行处会生成不可见空格，导致导航项之间出现意外间隙。
常见错误现象：<li>首页</li>
<li>关于</li> 在浏览器里显示时两个字之间有 4px 左右空隙。
立即学习“前端免费学习笔记（深入）”；
解决办法（选其一即可）：
- 把所有
<li>写在同一行，不换行 - 给
<ul></ul>设font-size: 0，再单独给<a></a>设字号（如font-size: 16px） - 改用 Flex 布局——推荐，省事且无副作用
当前页高亮必须靠 JS 动态判断路径
HTML 静态写死 class="active" 是典型维护陷阱：一旦页面路径微调（比如从 /about 改成 /about/ 或加了查询参数），高亮就失效。
简单可靠的前端判断逻辑（放在
