如何将导航栏拆分为左右两部分并消除左侧间隙？

我帮你排查了代码里的问题，主要是默认样式和结构规范的小问题，咱们一步步调整就能搞定：

1. 先修正不符合规范的HTML结构 #

你现在用<a>直接包裹<li>是不符合HTML标准的，正确的做法是把<a>放在<li>内部，这样既符合语义，也能避免一些样式冲突。比如把原来的：

<a class="" href=""><li class="main-nav">Home</li></a>

改成：

<li class="main-nav"><a href="">Home</a></li>

另外，你给右侧两个<li>用了重复的id="right-side"，ID是页面唯一的，换成class="right-side"就没问题了。

2. 消除左侧间隙的核心操作 #

<ul>标签默认带有padding-left（浏览器默认值一般是40px），这就是左侧导航和红色容器边缘之间小间隙的根源。咱们给<ul>添加padding: 0就能去掉这个默认内边距，同时顺便去掉默认的列表圆点和外边距，让样式更干净。

3. 优化样式细节 #

把<li>的display: inline改成inline-block，配合vertical-align: middle能让导航项对齐更稳定；再给<a>标签加个display: block和内边距，让点击区域更大，交互更友好。

修改后的完整代码 #

HTML部分

<div id="navbar">
  <div class="table">
    <ul>
      <li class="main-nav"><a href="">Home</a></li>
      <li class="main-nav"><a href="">about</a></li>
      <li class="main-nav"><a target="_blank" href="">where</a></li>
      <li class="main-nav"><a href="">team</a></li>
      <li class="main-nav"><a href="">Help</a></li>
      <li class="right-side sign-in"><a href="">Sign In</a></li>
      <li class="right-side sign-up"><a href="">Sign Up!</a></li>
    </ul>
  </div>
</div>

CSS部分

#navbar{
  position: relative;
  width: 100%;
  background-color: green;
  padding: 10px 0; /* 添加上下内边距，让导航栏更美观 */
}
.table{
  display: table;
  margin: 0 auto;
  width: 60%;
  background-color: red;
}
#navbar ul {
  list-style: none; /* 去掉默认列表圆点 */
  padding: 0; /* 关键：消除左侧间隙 */
  margin: 0; /* 去掉ul默认外边距 */
  overflow: auto;
}
#navbar li{
  display: inline-block; /* 比inline更易控制对齐 */
  vertical-align: middle;
}
.main-nav{
  float:left;
}
.right-side{
  float: right;
}
/* 优化链接样式，提升交互体验 */
#navbar li a {
  display: block;
  padding: 0 15px;
  text-decoration: none;
  color: #fff;
}

这样调整后，左侧的间隙就完全消失了，左右导航项都能贴合红色容器的边缘，同时导航的结构和交互也更规范啦。

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