本文介绍一种使用 css 渐变背景实现等宽导航项间垂直分隔线的现代方案，无需额外 html 元素，支持响应式缩放且分隔线精准居中于相邻链接之间。
本文介绍一种使用 css 渐变背景实现等宽导航项间垂直分隔线的现代方案，无需额外 html 元素，支持响应式缩放且分隔线精准居中于相邻链接之间。
在构建响应式导航栏时，常见需求是让所有导航项均分容器宽度（如三等分，各占 33%），同时在相邻项之间显示一个垂直居中的分隔符（如 |）。但直接使用 ::before 或 ::after 伪元素容易破坏布局对齐，而插入空 <li> 或 <span> 又会增加语义冗余、影响可访问性与维护性。
推荐采用 纯 CSS 背景渐变 + 精确尺寸计算 的方案，既保持 HTML 语义纯净，又确保视觉分隔线始终严格居中于每对相邻链接之间。
✅ 核心思路
- 使用 flex: 1 让每个 <li> 均分父容器宽度；
- 利用 nav 元素的 background 属性绘制重复线性渐变，作为“虚拟分隔线”；
- 通过 background-size 和 background-position 精确控制分隔线位置与密度，使其恰好出现在每两个 <li> 的间隙中央。
? 关键 CSS 解析
nav {
--s: 2px; /* 分隔线粗细 */
background:
linear-gradient(90deg, #fff var(--s), transparent 0)
repeat-x
calc(-1 * var(--s)) 50% /
calc((100% + var(--s)) / 3) 40%;
background-color: #333;
}- linear-gradient(90deg, #fff var(--s), transparent 0)：生成一条垂直方向（90°）、宽 --s 的白色短线；
- repeat-x：水平重复该短线；
- calc(-1 * var(--s)) 50%：将背景起点向左微调 --s，补偿线条偏移；
- calc((100% + var(--s)) / 3) 40%：设定每个重复单元宽度为 (100% + 线宽) / 3，确保三条线均匀分布于三等分间隙中心（即第1/2、2/3处），40% 控制高度占比（可调）。
? 完整可运行代码
<!DOCTYPE html>
<html>
<head>
<style>
* { box-sizing: border-box; }
nav {
padding: 10px;
--s: 2px;
background:
linear-gradient(90deg, #fff var(--s), #333 0)
repeat-x
calc(-1 * var(--s)) 50% /
calc((100% + var(--s)) / 3) 40%;
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;
font-size: 14px;
padding: 8px 0;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#section1">link 1</a></li>
<li><a href="#section2">link 2</a></li>
<li><a href="#section3">a long link</a></li>
</ul>
</nav>
</body>
</html>⚠️ 注意事项
- 此方案兼容所有现代浏览器（Chrome/Firefox/Safari/Edge ≥ 2020），不依赖 JS；
- 若需支持深色模式，可将 #fff 替换为 currentColor 并配合 color 统一控制；
- 分隔线颜色建议与文字色一致（如本例中 #fff），避免对比度过高；
- 当导航项数量变化时（如 4 项），需同步调整 background-size 中的分母（如 /4）及重复逻辑；
- 不建议在 a 上设置 width: 33% —— 这会破坏 Flex 布局的弹性，且无法响应内容长度差异。
该方法以极简的 CSS 实现了语义清晰、响应可靠、易于维护的分隔效果，是构建专业级导航栏的推荐实践。
