如何在导航栏上将我的列表分成两部分？

Question

我正在尝试将导航栏一分为二（一部分向左，另一部分向右）。当试图在左侧获得我想要的物品时，我在物品和墙壁之间留下了一个小缝隙。其中，右侧击中果岭和网格的墙壁。

**这个帖子有点新，所以如果您需要有关代码的更多信息，请务必回复*

这是 JSFiddle：https://jsfiddle.net/2dkhrjg8/2/

这里是 HTML:

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


    </ul>
  </div>

</div>

这是CSS：

#navbar{
  position: relative;
  table-layout: fixed;
  width: 100%;
  border-collapse: separate;
  background-color: green;
  }
.table{
  display: table;
  margin: 0 auto;
  width: 60%;
  overflow: auto;
  height: 20px;
  background-color: red;
  }
#navbar li{
  display: inline
  }
.main-nav{
  float:left;
  }
 #right-side{
  float: right;
  vertical-align: middle;
  }

Answer 1

好的。问题是您的 HTML 在语义上不正确。

我建议使用 flexbox，因为它非常容易做到。

检查修改后的HTML，如果我理解了，这就是你想要实现的。

祝你造型愉快，如果需要更多帮助就对了

.navbar {
  display: flex;
  justify-content: space-between;
}


.main-nav:hover{
 
  background-color: #eff0f1;

}

<div id="navbar">

        <ul class='navbar'>
          <li class="left-side">
            <a class="" href="#">Home</a>
            <a href="www.fdfd.com">About</a>
            <a target="_blank" href="#">Where</a>
            <a href="#">Team</a>
            <a href="#">Help</a>
            <input id="nav-search-bar" type="text" placeholder="Search..." />
          </li>
          <li class="right-side">
            <a href="#" class="sign-in">Sign In</a>
            <a href="#" class="sign-up">Sign Up!</a>
          </li>
      
        </ul>
      </div>

如何在导航栏上将我的列表分成两部分？

How to split my list into two sections on navigation bar?

html

css

web-deployment