本文介绍使用 CSS 线性渐变背景在 Flex 布局导航栏中自动添加垂直居中、等距分布的分隔符（|），无需额外 HTML 元素，完美适配响应式设计与动态文本长度。
本文介绍使用 css 线性渐变背景在 flex 布局导航栏中自动添加垂直居中、等距分布的分隔符（`|`），无需额外 html 元素，完美适配响应式设计与动态文本长度。
要在响应式导航栏中实现「每个链接占 33% 宽度 + 分隔符精准居中于相邻链接之间」的效果，关键在于避免依赖 justify-content: space-around（它无法保证等宽）或伪元素 ::before/::after（易破坏布局流）。更优雅、健壮的方案是：利用 flex: 1 实现等分容器，再通过 background 渐变在 。
✅ 推荐实现（纯 CSS，无额外 DOM）
* {
box-sizing: border-box;
}
nav {
padding: 10px;
--s: 2px; /* 分隔线粗细 */
--h: 40%; /* 分隔线高度（相对 nav 高度） */
background:
linear-gradient(90deg, #fff var(--s), transparent 0)
repeat-x
calc(-1 * var(--s)) 50% /
calc((100% + var(--s)) / 3) var(--h);
background-color: #333;
}
ul {
list-style: none;
display: flex;
align-items: center;
padding: 0;
margin: 0;
}
ul li {
flex: 1; /* 等分父容器宽度 */
text-align: center;
}
a {
display: block;
text-decoration: none;
color: white;
text-transform: uppercase;
padding: 8px 0; /* 垂直内边距增强点击区域 */
}
a:hover {
text-decoration: underline;
}<nav>
<ul>
<li><a href="#section1">Link 1</a></li>
<li><a href="#section2">Link 2</a></li>
<li><a href="#section3">Link 3</a></li>
</ul>
</nav>? 原理说明
- flex: 1 使每个
- 均匀占据 1/3 容器宽度，无论链接文字长短（如 a long link 也能自适应）；
- background 使用 linear-gradient 绘制一条垂直短线（90deg 表示水平方向渐变），repeat-x 水平重复；
- calc((100% + var(--s)) / 3) 控制重复间距：每段背景宽度 = 总宽 ÷ 3 + 分隔线粗细，确保分隔线始终落在两个
- 的视觉间隙正中央；
- calc(-1 * var(--s)) 50% 将背景起点向左偏移 --s，补偿线条自身宽度，使线条视觉上完全居中于间隙；
- var(--h) 可灵活调整分隔线高度（如设为 60% 更醒目，20% 更含蓄）。
⚠️ 注意事项
- 分隔符颜色由 linear-gradient 第一个色标决定（示例中为 #fff），请根据实际文字颜色调整对比度；
- 若需分隔符为 | 字符而非线条，仍推荐用伪元素，但必须作用于
- 之间（如 li:not(:last-child)::after），并设置 position: absolute + transform: translateX(-50%) 精准定位——但该方式在响应式下易错位，不推荐；
- 此方案天然响应式：当视口缩小时，flex: 1 和 background-size 自动按比例缩放，分隔符位置与粗细保持一致。
该方法简洁、高效、零 JS、兼容现代浏览器（Chrome/Firefox/Safari/Edge ≥ 16），是构建专业级响应式导航栏的首选实践。
