横向导航栏应使用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 是否把父容器设为弹性上下文。

• • @#@#@#@#@#@#@#@#@#@0
  这类结构足够，无需额外 class
• 必须给
  加 display: flex，不是给
• 加
• 用 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+ 支持，但

之间会因换行产生 4px 左右空白，导致无法紧密排列。

• 必须把
• 写成一行，或在
  上设 font-size: 0，再给 a 单独设字号
• vertical-align: middle 必须加在
• 或 上，否则基线对不齐
• 不能依赖 gap，得用 margin-right 控制间隔，最后一个元素要额外处理避免多余外边距

移动端横向导航必须加 overflow-x: auto

横向菜单在小屏上超出视口时，默认会被截断或换行，用户根本点不到右侧项。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 给
  或
  加 overflow-x: auto + white-space: nowrap
• 配合 -webkit-overflow-scrolling: touch 提升 iOS 滚动手感
• 别只加 overflow: auto，那会触发垂直滚动，干扰体验
• 如果用 flex，记得加 flex-wrap: nowrap 防止意外折行

不要用 float 实现横向导航

虽然历史上这么干过，但现在它会引发父容器塌陷、清除浮动成本高、与 Flex/Grid 混用极易冲突。

• 一旦给
• 加 float: left，
  高度就变成 0，必须额外清浮
• 响应式切换时，float 的重排逻辑远不如 flex 可控
• 所有主流 CSS 重置库（如 Normalize.css）已默认移除 float 导航的兼容假设

真正难的不是写出第一版横向导航，而是当菜单项动态生成、中英文混排、需要下拉子菜单、或嵌入 CMS 输出流时，gap 和 flex-shrink 的组合行为会突然暴露——这时候才看出是不是真理解了主轴和交叉轴。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！