HTML横向导航怎么加分隔线？竖线间隔添加技巧-html教程-PHP中文网

是语义化水平分隔符，非竖线解决方案；导航栏中“首页”“关于”“服务”间应使用nav ul li::after加竖线，或div配合color-scheme适配暗色模式，避免旋转导致布局错位与可访问性问题。

html横向导航怎么加分隔线？竖线间隔添加技巧

横向导航里加竖线分隔，别用

是语义化水平分隔符，浏览器默认渲染为横线，强行 transform: rotate(90deg) 会导致布局错位、可访问性下降、高DPI屏下模糊——它不是竖线的解决方案。

真正可控的做法是：用

 或伪元素 + CSS 控制宽度/高度/颜色/对齐。常见错误包括：
给  加 rotate 后父容器高度塌陷
用 border-left 替代背景色，在缩放时出现 1.5px 模糊边
伪元素未设 display: inline-block，导致宽高无效

Flex 导航项间自动插入等距竖线（推荐）
当导航项用 display: flex + flex: 1 等分宽度时，最干净的竖线方案是把分隔线画在 
 背景上，用 linear-gradient 重复绘制。
关键点在于计算单元宽度：calc((100% + var(--s)) / N)（N 是项数），让每条竖线精准落在相邻项正中央。例如三等分导航：
nav {
  --s: 2px;
  background: linear-gradient(90deg, currentColor var(--s), transparent 0)
              repeat-x calc(-1 * var(--s)) 50% / calc((100% + var(--s)) / 3) 40%;
}
这样既不增加 DOM 节点，又天然响应式；currentColor 还能随文字颜色联动变色。
用伪元素加竖线，注意 vertical-align 和 margin
适合两个按钮、图标或短文本并排时加中间竖线，比如 。
直接在容器上用 ::after 插入一条竖线更轻量，但必须显式设置：

											
												
												
													DeepBI DHTML 页面生成器
													生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：

- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；  
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；  
- 提及位于 `apps/console/src/featur
												
												下载
												
											
										


display: inline-block（否则 width/height 不生效）

vertical-align: middle（避免和文字底部对齐导致视觉偏高）

margin: 0 8px（用 margin 而非 padding，不撑开父容器）

示例：
.nav-group::after {
  content: "";
  width: 1px;
  height: 1.2em;
  background: #ccc;
  margin: 0 8px;
  display: inline-block;
  vertical-align: middle;
}
SVG 竖线只在需要抗锯齿或动态主题时才用
普通场景没必要上 SVG；但它在 Retina 屏、主题切换、动画需求下确实更稳—— 渲染的是矢量，不会模糊，颜色也能用 CSS 变量控制。
一个最小可用示例：
<svg width="1" height="24" viewbox="0 0 1 24"><rect width="1" height="24" fill="currentColor"></rect></svg>
注意：viewBox 保证缩放不失真；fill="currentColor" 让它跟随父元素文字颜色变化；如果嵌在行内，加 vertical-align: middle 对齐。
复杂点在于，所有方案都依赖父容器有明确高度或 display: flex 触发 BFC；如果竖线高度始终不对，先检查父级是否设置了 height 或 line-height，而不是直接调伪元素的 top/bottom。

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