当我添加按钮时，导航会向左移动

Question

所以基本上我想将导航保持在中心，但每当我添加按钮时，导航就会向左移动。如何始终保持导航居中？

  <nav>

    <div class="logo">

      <h3>LOGO</h3>

    </div>

    <ul class="nav-links">

      <li><a href="#">Home</a></li>

      <li><a href="#">Eggs</a></li>

      <li><a href="#">Oats</a></li>

      <li><a href="#">Cook</a></li>

      <li><a href="#">Cream</a</li>

    </ul>

    <div class="nav-buttons">

      <button type="submit">Sign in</button>

      <span>|</span>

      <button type="submit">Sign up</button>

    </div>

  </nav>

  </div>

</header>

导航 {

显示：弯曲；

对齐内容：空间之间；

对齐项目：中心；

}

导航李{

显示：内联块；

边距：0px 15px；

列表样式：无；

}

导航 {

文字装饰：无；

颜色：白色；

}

.标志{

颜色：白色；

}

.nav-链接 {

位置：绝对；

左：50%；

变换：translateX(-50%);

}

好的，所以我解决了这个问题，并在 .nav-links idk 上使用了绝对位置（如果这是正确的方法的话）。

Answer 1

您可以使用 flex 或 grid 示例：

div ul{
display: flex;
justify-content: center;
}
div ul li {
  margin: 0 10px;
  list-style-type: none
}

<div>
  <ul>
    <li>hi</li> 
    <li>hi</li>
    <li>hi</li>
    <li>hi</li>
  </ul>
</div>