如何在响应式导航栏中为菜单项添加居中分隔线-html教程-PHP中文网

本文介绍一种使用 css 渐变背景实现等宽导航项间垂直分隔线的现代方案，无需额外 html 元素，支持响应式缩放且分隔线精准居中于相邻链接之间。

本文介绍一种使用 css 渐变背景实现等宽导航项间垂直分隔线的现代方案，无需额外 html 元素，支持响应式缩放且分隔线精准居中于相邻链接之间。

在构建响应式导航栏时，常见需求是让所有导航项均分容器宽度（如三等分，各占 33%），同时在相邻项之间显示一个垂直居中的分隔符（如 |）。但直接使用 ::before 或 ::after 伪元素容易破坏布局对齐，而插入空

或又会增加语义冗余、影响可访问性与维护性。

推荐采用 纯 CSS 背景渐变 + 精确尺寸计算 的方案，既保持 HTML 语义纯净，又确保视觉分隔线始终严格居中于每对相邻链接之间。

✅ 核心思路

使用 flex: 1 让每个
均分父容器宽度；
利用 nav 元素的 background 属性绘制重复线性渐变，作为“虚拟分隔线”；
通过 background-size 和 background-position 精确控制分隔线位置与密度，使其恰好出现在每两个
的间隙中央。

? 关键 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% 控制高度占比（可调）。

? 完整可运行代码



<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><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>