如何仅用HTML和CSS为导航栏右侧边框添加间距？

嘿，我来帮你搞定这个学校作业里的导航栏问题！从你给出的代码来看，大概率遇到的是最后一个列表项多了多余右边框，或者margin和边框叠加导致整体布局不协调的问题，我给你两个针对性的解决思路：

1. 去掉最后一个列表项的多余边框 #

你给每个li加了border-right，但最后一个li其实不需要这个边框，不然会显得很突兀。可以用CSS的:last-child伪类精准去掉它：

.nav .container ul li{
  display: inline-block;
  margin: 10px 18px;
  position: relative;
}
.nav li{
  border-right: 1px solid black;
}
/* 新增：去掉最后一个li的右边框 */
.nav .container ul li:last-child{
  border-right: none;
}

2. 用Flex布局优化导航栏（更推荐） #

inline-block布局有时候会因为代码换行产生莫名间隙，用Flex布局能更轻松控制间距和对齐，代码也更简洁：

修改后的CSS： #

.nav .container ul{
  /* 把ul设为flex容器，消除默认间距 */
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav .container ul li{
  /* 用padding控制内部间距，配合边框更协调 */
  padding: 10px 18px;
  position: relative;
  border-right: 1px solid black;
}
.nav .container ul li:last-child{
  border-right: none;
}
/* 可选：优化a标签样式，让点击区域更合理 */
.nav .container ul li a{
  text-decoration: none;
  color: inherit;
}

对应的HTML（保持你的结构即可）： #

<body>
  <div class="nav">
    <div class="container">
      <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">ABOUT US</a></li>
        <li><a href="#">SERVICES</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>
    </div>
  </div>
</body>

这样调整后，导航栏的间距会更均匀，最后一项也不会有多余的边框啦。如果还有其他细节问题（比如间距大小不对、对齐问题），随时说哦！

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