Question

这是我克隆Jobbatical.com的摘录，作为学习项目的一部分。忽略丢失的徽标。

我正在尝试在固定的导航栏右对齐中创建第二个无序列表（其列表项为登录，加入，对于公司）。我已经尝试了各种方法使用检查器工具，并设置margin-left：auto但由于某种原因我无法使其工作。

https://codepen.io/jenlky/pen/RxyyEL?editors=1100

<nav class="navbar navbar-nav navbar-expand-md fixed-top bg-dark">
  <div class="container-fluid">
    <div class="fix-navbar d-none d-md-flex">
      <ul class="navbar-nav">
        <li>
          <a href="#" title="Jobbatical.com" alt="jobbatical.com" id="logo"><img src="jobbatical_logo_blue.svg"></a>
        </li>
        <li>
          <a href="#" alt="Find jobs">Find jobs</a>
        </li>
      </ul>
      <ul class="navbar-nav navbar-right">
        <li>
          <a href="#" alt="Login in">Log in</a>
        </li>
        <li>
          <a href="#" alt="Sign up!">Join</a>
        </li>
        <li class="btn btn-primary btn-sm" id="for-companies">
          <a href="#" alt="Looking to hire?" id="companies-link">for companies</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

/* doesnt work... */
.navbar-right {
    margin-left: auto !important;
}

li a:not(#companies-link) {
    line-height: 60px;
}

nav .navbar-nav > li > a {
    font-size: 13px;
    line-height: 35px;
    text-transform: uppercase;
    color: #1c75bc;
    padding: 33px 0 31px;
    margin: 0 18px;
    font-family: Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;
    font-weight: 700;
    -webkit-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
}

nav .navbar-nav > li.btn > a {
    color: #fff;
    padding: 12px 4px 10px;
    position: relative;
    float: right;
    margin: 0 15px;
}

Answer 1

您需要在flex: 1个弹性项目的父级设置ul。

父（.fix-navbar）也恰好是弹性项目。它是.container-fluid的孩子，有display: flex。但是弹性项目不会自动获得全宽。

因此ul弹性项目的父级正在收缩包装内容，当您应用margin-left: auto时，没有额外的空间可以使用它。

因此，请在flex: 1上设置.fix-navbar。这使它具有父级的全宽，创建额外的空间，并使margin-left: auto能够处理子级。

revised codepen

如何使弹性项目对齐？

1 个答案: