Question

我在导航菜单中遇到元素位置问题：

<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

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

Answer 1

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

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

此外，相关：How to justify a single flexbox item (override justify-content)

Answer 2

试试这个，

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

Answer 3

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

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

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

在导航栏内定位元素

3 个答案: