如何在nav bar导航栏中实现多个链接的均匀间距排布？

你可以通过Flex布局快速实现导航栏链接的均匀间距，首先修正现有代码的语义化问题，再调整CSS即可：

修正后的HTML代码 #

<h1>ABOUT ME</h1>
<div class="topnav">
  <nav>
    <ul>
      <li><a href="aboutme.html">About Me</a></li>
      <li><a href="mypast.html">My Past</a></li>
      <li><a href="mypresent.html">My Present</a></li>
      <li><a href="myfuture.html">My Future</a></li>
      <li><a href="feedback.html">Feedback</a></li>
    </ul>
  </nav>
</div>

修正后的CSS代码 #

.topnav {
  overflow: hidden;
  background-color: white;
  border: 5px solid black;
}
/* 新增ul的样式重置和flex配置 */
.topnav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  /* 均匀分配间距，所有导航项的左右间距完全相等 */
  justify-content: space-evenly;
}
.topnav a {
  display: block;
  color: black;
  text-align: center;
  padding: 14px 30px;
  text-decoration: none;
  font-size: 17px;
  border-bottom: 3px solid transparent;
}

调整说明 #

• 原HTML中<ul>标签内直接放<a>不符合语义规范，修正为每个链接用<li>标签包裹，避免浏览器兼容问题
• 去掉了<a>标签的float属性，改用Flex布局实现自动均匀排布，比浮动方案更易维护
• justify-content: space-evenly可以实现导航项、导航栏左右边缘的间距完全相等；如果需要导航项贴住导航栏左右边缘，仅中间间距均等，可将该属性值改为space-between
• 如果需要导航项本身也平分宽度，可以给.topnav li加flex: 1，再给.topnav a加width: 100%即可

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