横向导航栏应使用display: flex（而非inline-block或float）实现，核心是给设display: flex、list-style: none、gap控距、align-items: center垂直居中，并配合overflow-x: auto和flex-wrap: nowrap保障小屏可滚动且不换行。
横向导航栏不是靠“写对某个标签”实现的，而是靠 display 和 flex 或 inline-block 控制排列方向——用错方式会导致换行、间隙失控、响应失效。
用 display: flex 最稳妥（现代浏览器全覆盖）
这是当前最推荐的方式，语义清晰、对齐可控、响应友好。关键不在 HTML 结构多复杂，而在 CSS 是否把父容器设为弹性上下文。
-
<nav><ul><li><a href="#">首页</a></li></ul></nav>这类结构足够，无需额外 class - 必须给
<ul></ul>加display: flex，不是给<li>加 - 用
list-style: none去掉默认圆点，用margin或gap控制间距（gap更干净） - 别忘了加
align-items: center，否则文字可能上下不对齐
nav ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 1.5rem;
}
nav a {
text-decoration: none;
padding: 0.5rem 1rem;
}
display: inline-block 兼容旧项目但容易踩坑
IE9+ 支持，但 <li> 之间会因换行产生 4px 左右空白，导致无法紧密排列。
- 必须把
<li>写成一行，或在<ul></ul>上设font-size: 0，再给a单独设字号 -
vertical-align: middle必须加在<li>或<a></a>上，否则基线对不齐 - 不能依赖
gap，得用margin-right控制间隔，最后一个元素要额外处理避免多余外边距
移动端横向导航必须加 overflow-x: auto
横向菜单在小屏上超出视口时，默认会被截断或换行，用户根本点不到右侧项。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 给
<nav></nav>或<ul></ul>加overflow-x: auto+white-space: nowrap - 配合
-webkit-overflow-scrolling: touch提升 iOS 滚动手感 - 别只加
overflow: auto，那会触发垂直滚动，干扰体验 - 如果用
flex，记得加flex-wrap: nowrap防止意外折行
不要用 float 实现横向导航
虽然历史上这么干过，但现在它会引发父容器塌陷、清除浮动成本高、与 Flex/Grid 混用极易冲突。
- 一旦给
<li>加float: left，<ul></ul>高度就变成 0，必须额外清浮 - 响应式切换时，
float的重排逻辑远不如flex可控 - 所有主流 CSS 重置库（如 Normalize.css）已默认移除
float导航的兼容假设
真正难的不是写出第一版横向导航，而是当菜单项动态生成、中英文混排、需要下拉子菜单、或嵌入 CMS 输出流时，gap 和 flex-shrink 的组合行为会突然暴露——这时候才看出是不是真理解了主轴和交叉轴。
