如何使导航栏元素宽度均匀分布？调整分隔边框至间距正中

要实现导航栏元素宽度均匀分布，同时让分隔边框精准位于元素空隙正中，可以通过以下修改完成：

修改后的完整代码 #

CSS

* {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul {
  list-style: none;
}

nav {
  background: bisque;
}

nav ul {
  display: flex;
  border: 1px solid #100;
  /* 控制元素间空隙大小，可根据需求调整 */
  gap: 2rem;
  padding: 0 1rem;
}

li {
  /* 让每个列表项均匀分配导航栏宽度 */
  flex: 1;
  text-align: center;
  position: relative;
}

/* 给除最后一项外的元素添加空隙正中的分隔边框 */
li:not(:last-child)::after {
  content: '';
  position: absolute;
  /* 对应gap的一半，精准定位到空隙正中 */
  right: -1rem;
  top: 10%;
  /* 边框高度，避免与导航栏上下边框重合 */
  height: 80%;
  width: 1px;
  background-color: #100;
}

li a {
  text-decoration: none;
  color: #100;
  line-height: 3rem;
  font-size: 2rem;
  /* 让链接占满整个列表项，提升点击体验 */
  display: block;
}

HTML

<nav>
  <ul>
    <li><a href="go.html">Home</a></li>
    <li><a href="go.html">Extra</a></li>
    <li><a href="go2.html">Food</a></li>
    <li><a href="go2.html">Drinks</a></li>
    <li><a href="go2.html">About</a></li>
  </ul>
</nav>

关键修改说明 #

1. 均匀分布元素宽度：给li添加flex: 1，让所有列表项自动平分导航栏的可用宽度，同时用text-align: center让文字居中。
2. 精准定位分隔边框：
   • 用gap控制元素间的空隙大小，替代原有的justify-content: space-evenly，方便精准计算边框位置。
   • 通过li:not(:last-child)::after伪元素创建分隔线，利用绝对定位将其放在空隙的正中（right: -1rem对应gap: 2rem的一半），并设置高度为80%避免与导航栏上下边框重叠。
3. 优化交互体验：给li a添加display: block，让链接占满整个列表项的宽度，扩大点击区域。

无空隙版本（元素紧挨着，边框在正中） #

如果不需要元素间的空隙，只需调整伪元素的定位代码：

li:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  /* 将边框平移到两个元素的正中位置 */
  transform: translateX(50%);
  top: 10%;
  height: 80%;
  width: 1px;
  background-color: #100;
}

内容的提问来源于stack exchange，提问作者Turbold Batjargal