本文介绍一种纯 CSS 方案，通过 flex 布局 + 线性渐变背景，在三等分的响应式导航栏中精准插入垂直居中、宽度自适应的分隔符（|），无需额外 HTML 元素或伪类干扰布局。
本文介绍一种纯 css 方案，通过 flex 布局 + 线性渐变背景，在三等分的响应式导航栏中精准插入垂直居中、宽度自适应的分隔符（`|`），无需额外 html 元素或伪类干扰布局。
要实现「每个导航项严格占 33% 宽度 + 分隔符精准居中于相邻两项之间」的效果，关键在于放弃 justify-content: space-around（它依赖内容宽度动态分配间距，无法保证等分），转而采用 flex: 1 均分容器，再利用 background: linear-gradient() 在
✅ 推荐方案：CSS 渐变背景绘制分隔线
该方法将分隔线作为导航栏背景的一部分，通过精确计算位置与尺寸，实现视觉上“位于链接之间”的效果，且完全响应式：
* {
box-sizing: border-box;
}
nav {
padding: 10px;
--s: 2px; /* 分隔线粗细（建议 1–3px） */
--h: 40%; /* 分隔线高度（相对 nav 高度，建议 30%–60%） */
background-color: #333;
/* 关键：横向重复渐变，每 1/3 宽度绘制一条竖线 */
background:
linear-gradient(90deg,
currentColor var(--s),
transparent 0)
repeat-x
calc(-1 * var(--s)) 50% /
calc((100% + var(--s)) / 3) var(--h);
}
ul {
list-style: none;
display: flex;
align-items: center;
padding: 0;
margin: 0;
}
ul li {
flex: 1; /* 等宽分配：三列各占 ~33.33% */
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 在
- 上确保三项严格等宽（忽略文字长度差异）；
- background 使用 linear-gradient(90deg, ...) 创建垂直线段，并通过 repeat-x 水平重复；
- calc((100% + var(--s)) / 3) 是核心：每条分隔线占据「1/3 容器宽度 + 自身粗细补偿」，使重复图案自然对齐到两列间隙中心；
- calc(-1 * var(--s)) 50% 将渐变起点向左偏移一个像素，避免首列左侧出现多余线条；
- currentColor 使分隔线颜色随 color 或 border-color 自动同步（此处继承 #333 的对比色，实际显示为浅灰或白色需配合 color: white）；若需固定颜色（如 #fff），可直接替换 currentColor。
⚠️ 注意事项
- 此方案不依赖 ::before/::after 伪元素，彻底规避了定位偏移、z-index 干扰或破坏 flex 流的问题；
- 分隔线高度 (--h) 和粗细 (--s) 可自由调整，推荐 --s: 2px; --h: 40% 以兼顾清晰度与美观；
- 若导航项数量变化（如 4 项），仅需修改分母：calc((100% + var(--s)) / 4)；
- 移动端适配时，建议配合媒体查询切换为堆叠布局（flex-direction: column）并隐藏分隔线。
该方案简洁、高效、无侵入性，是现代 CSS 实现语义化分隔的理想实践。
