gap仅对display: flex或grid容器生效，ul默认为block，故加gap无效；需显式设置ul的display为flex或grid，并确保li为其直系子元素。
用 gap 最省心，但必须确保父容器是 display: flex 或 display: grid；否则它直接失效。
为什么给 ul 加了 gap 却没反应
因为 gap 只在 Flex 和 Grid 容器中生效。如果 ul 还是默认的 display: block，那 gap 会被浏览器完全忽略。
- 检查开发者工具里
ul的 computeddisplay值，确认是flex而非block - 别只写
gap: 1rem，漏掉display: flex是最常见错误 - 若用
nav > ul结构，样式要落在ul上，而不是nav—— 否则li不是直系 Flex 项目，gap仍不作用
justify-content: space-between 没把菜单推到两边
这个属性只对 Flex 容器的**直系子元素**起效。如果你把 display: flex 加在 nav 上，而里面是 ul 包着 li，那 ul 才是 Flex 项目，li 根本不受控。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 正确做法：给
ul设display: flex; justify-content: space-between，让li成为直系项目 - 想左放 Logo、右放菜单？用两级 Flex：
nav设display: flex; justify-content: space-between，内部两个ul分别作为左右容器 - 小屏下折行时
space-between失效，此时改用justify-content: flex-start+gap更稳
兼容老浏览器时怎么安全加间距
Chrome 100+/Firefox 104+ 支持 gap，IE11 和旧版 Safari 不支持。退路不是乱加 margin，而是有节制地用选择器控制。
立即学习“前端免费学习笔记（深入）”；
- 优先写
gap: var(--space-md)，再补一行margin-right: var(--space-md)，并用:not(:last-child)避免末尾多出空隙 - 别用
font-size: 0清除 inline 元素间隙——破坏可访问性，且嵌套span或图标时要反复重置字体大小 - 所有间距值统一走 CSS 变量（如
--space-sm: 0.5rem），后续调整只需改:root，不用翻代码找 magic number
真正容易被忽略的点是 padding-inline-start: 40px：它藏在 ul 默认样式里，不显式设为 0，左侧永远有“看不见的空隙”，哪怕你写了 padding: 0 也没用。
