导航栏内元素的定位答案

【问题标题】：Positioning of elements inside the Navigation bar导航栏内元素的定位
【发布时间】：2017-02-28 19:40:58
【问题描述】：

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

<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 中查看我的工作：http://codepen.io/marcvs/pen/JRmQjx

我是 Web 开发的新手。

【问题讨论】：

标签： html css flexbox

【解决方案1】：

试试这个。
弹性显示是一种灵活的布局。
通过以百分比形式给出正确的值，它还可以响应应用程序。

.button {
  display:flex;
  position:absolute;
  right:3%;
}

<div class="button">
     <a href="#" class="">Log in</a>
     <a href="#">Sign up</a>
</div>

【讨论】：

【解决方案2】：

试试这个，

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

【讨论】：

【解决方案3】：

没有真正的justify-child 选项，但您可以使用margin-left: auto; 技巧：

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

【讨论】：