Html 导航栏中元素的定位

我对导航菜单中元素的位置有问题：

<header class="main-header">
  <a href="" class="logo"><img src="https://www.paypalobjects.com/webstatic/i/logo/rebrand/ppcom.svg" alt="Paypal logo" /></a>
  <nav class="main-nav">
    <ul>
      <li><a href="">Buy</a></li>   
      <li><a href="">Sell</a></li> 
      <li><a href="">Send</a></li> 
      <li><a href="">Business</a></li> 
    </ul>
  </nav>
  <div class="button">
    <a href="#" class="">Log in</a>
    <a href="#">Sign up</a>
  </div>
</header>

div.button

是我遇到问题的元素。我使用

flex

将元素放置在标题中。但是

div.button

的位置有问题，我无法将其定位到右侧。我在左边插入了一个填充物来移动它，但这只是一个糟糕的解决方法

您可以在CodePen中查看我的工作：

---

在网络开发方面，我是个新手。

没有真正的

justify child

选项，但您可以使用

左边距：auto技巧：

.button {
  display: flex;
  margin-left: auto;
}

另外，相关：
没有真正的
对齐子项
选项，但是您可以使用
左边距：auto技巧：

.button {
  display: flex;
  margin-left: auto;
}

另外，相关：
试试这个

.button {
  display: flex;
  position: absolute;
  right: 0px;
}

试试这个

.button {
  display: flex;
  position: absolute;
  right: 0px;
}

试试这个。

flex display是一种灵活的布局。

通过以百分比形式给出正确的值，它也会响应应用程序


。按钮{
显示器：flex；
位置：绝对位置；
右：3%；
}

试试这个。

flex display是一种灵活的布局。

通过以百分比形式给出正确的值，它也会响应应用程序


。按钮{
显示器：flex；
位置：绝对位置；
右：3%；
}