HTML横向导航文字重叠怎么调整？行高字距校正技巧-html教程-PHP中文网

文字重叠源于line-height、字体度量与盒模型未对齐；须用无单位line-height（如1.6）、box-sizing: border-box、white-space: nowrap，并逐层检查Computed样式。

html横向导航文字重叠怎么调整？行高字距校正技巧

文字重叠不是“导航没写好”，而是行高（line-height）、字体度量、盒模型三者没对齐——尤其在中文字体下，line-height设错或缺失时，浏览器会用不兼容的后备字体计算行盒，直接导致多行文本垂直堆叠。

为什么`line-height`设了还重叠？

常见错误是把 line-height 写成带单位的固定值（如 line-height: 20px），一旦父容器字体变大，子元素继承后行高卡死，文字就挤进同一高度；或者压根没给导航项显式声明 line-height，浏览器回退到 Times New Roman 等西文字体度量，中文 ascent/descent 计算失准。

必须用无单位数值：比如 line-height: 1.6，它随 font-size 缩放，保证比例稳定
别在 nav 或 ul 上设 line-height，那会污染所有后代元素；应只作用于具体导航项（如 a 或 .nav-item）
若用了自定义字体（如 font-family: "PingFang SC", "Microsoft YaHei"），务必确认该字体文件未损坏——可临时切回系统默认字体验证是否缓解

`padding` 和 `box-sizing` 没配对，高度就不可控

导航项常靠 padding-top/padding-bottom 实现视觉居中，但若忽略 box-sizing，实际高度会超出预期：比如设了 height: 48px + padding: 12px 16px，在默认 box-sizing: content-box 下，总高变成 48px + 24px = 72px，相邻项间距被撑开，而内容区反而只剩 24px 高，两行文字自然重叠。

DeepBI DHTML 页面生成器

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

下载

强制统一加 box-sizing: border-box 到所有导航项（a、button、div.nav-item）
上下内边距优先用 em 单位：如 padding: 0.75em 1rem，随字体缩放，避免小字号下 padding 过大、大字号下过小
若需精确控制单行高度，用 min-height: calc(1.6em * 1) 替代单纯依赖 line-height，再配合 display: flex; align-items: center 垂直居中文字

Flex 导航里文字换行导致错位重叠

当导航项文字过长（比如“关于我们”+“产品中心”+“客户服务”混排），flex: 0 0 auto 虽防压缩，但若没限制宽度或禁止换行，文字仍会在窄屏下折成两行，第二行顶到下一项顶部，形成视觉重叠。

加 white-space: nowrap 阻止换行，这是横向导航的底线规则
搭配 overflow: hidden 和 text-overflow: ellipsis（需同时设 width 或 max-width）处理超长截断
响应式断点处（如 @media (max-width: 768px)）必须关闭 white-space: nowrap 并切换为竖排，否则手机上会横向溢出或强制缩小字体引发新的重叠

真正难调的不是某一行 CSS，而是字体加载失败时浏览器悄悄降级、line-height 继承链断裂、以及 box-sizing 在不同层级被重置——建议打开开发者工具，在 Elements 面板里逐层检查每个导航项的 Computed 样式，重点盯住 line-height、font-family、box-sizing 和 height 四个字段的实际值。