Question

 <nav class="navbar">
      <ul class="navbar__list">
        <li class="navbar__brand">
          <img src="imgs/logo.webp" alt="logo" class="navbar__brand--logo" />
        </li>
        <li class="navbar__item">
          <a class="navbar__link" href="#">Home</a>
        </li>
        <li class="navbar__item">
          <a class="navbar__link" href="#">About</a>
        </li>
        <li class="navbar__item">
          <a class="navbar__link" href="#">Performance</a>
        </li>
        <li class="navbar__item">
          <a class="navbar__link" href="#">Get started</a>
        </li>
        <li class="navbar__item">
          <a class="navbar__link" href="#">News</a>
        </li>
        <li class="navbar__item">
          <a class="navbar__link" href="#">Contact</a>
        </li>
        <div class="navbar__buttons">
          <li class="navbar__item">
            <a class="navbar__link" href="#">Sign up</a>
          </li>
          <li class="navbar__item">
            <a class="navbar__link" href="#">Login</a>
          </li>
        </div>
      </ul>
    </nav>

在上面的代码中，我希望将具有类navbar__buttons的div浮动到右侧并与其他navbar__item项垂直对齐。

我已经拥有的东西：

这是我的CSS

  width: 100%;


  &__item {
    display: inline-block;
    font-weight: 700;

    transform: translateY(-1rem);

    &:not(:last-child) {
      margin-right: 2rem;
    }
  }

  &__brand {
    display: inline-block;
    margin-right: 2rem;

    width: 14rem;

    &--logo {
      width: 100%;
    }
  }


  &__buttons {
    display: inline-block;
    float: right;
  }

我希望将类别为navbar__buttons的div浮动到正确的位置，并与其余导航栏项目位于同一行

注意：我正在使用css / scss

Answer 1

Flexbox

ul {
  list-style-type: none;
  display: flex;
}

li {
  padding: .25em;
}

li:nth-last-child(2) {
  margin-left: auto;
}

<nav class="navbar">
  <ul class="navbar__list">
    <li class="navbar__brand">
      <img src="imgs/logo.webp" alt="logo" class="navbar__brand--logo" />
    </li>
    <li class="navbar__item">
      <a class="navbar__link" href="#">Home</a>
    </li>
    <li class="navbar__item">
      <a class="navbar__link" href="#">About</a>
    </li>
    <li class="navbar__item">
      <a class="navbar__link" href="#">Performance</a>
    </li>
    <li class="navbar__item">
      <a class="navbar__link" href="#">Get started</a>
    </li>
    <li class="navbar__item">
      <a class="navbar__link" href="#">News</a>
    </li>
    <li class="navbar__item">
      <a class="navbar__link" href="#">Contact</a>
    </li>
    <li class="navbar__item">
      <a class="navbar__link" href="#">Sign up</a>
    </li>
    <li class="navbar__item">
      <a class="navbar__link" href="#">Login</a>
    </li>
  </ul>
</nav>

Answer 2

您可以在元素上使用flex CSS属性来获得所需的布局。

首先，我将navbar__buttons移到navbar__list之外，对HTML进行了一些微调：

<nav class="navbar">
  <ul class="navbar__list">
    <li class="navbar__brand">
      <img src="http://placekitten.com/200/100" alt="logo" class="navbar__brand--logo" />
    </li>
    <li class="navbar__item">
      <a class="navbar__link" href="#">Home</a>
    </li>
    <li class="navbar__item">
      <a class="navbar__link" href="#">About</a>
    </li>
    <li class="navbar__item">
      <a class="navbar__link" href="#">Performance</a>
    </li>
    <li class="navbar__item">
      <a class="navbar__link" href="#">Get started</a>
    </li>
    <li class="navbar__item">
      <a class="navbar__link" href="#">News</a>
    </li>
    <li class="navbar__item">
      <a class="navbar__link" href="#">Contact</a>
    </li>
  </ul>
  <ul class="navbar__buttons">
    <li class="navbar__item">
      <a class="navbar__link" href="#">Sign up</a>
    </li>
    <li class="navbar__item">
      <a class="navbar__link" href="#">Login</a>
    </li>
  </ul>
</nav>

这将允许您利用我在下面概述的flex属性。

将navbar显示为flex可让您利用justify-content: space-between;，它实际上将navbar的子代平均分布在行上，第一个元素在左侧以及最后一个元素在右侧，从而将navbar__buttons推到右侧：

.navbar {
   width: 100%;
   display: flex;
   justify-content: space-between;
}

从此处，您的navbar__buttons链接将与顶部对齐（也即与其他导航链接不对齐）。因此，您还需要向flex中添加一些navbar__buttons属性：

.navbar__buttons {
   display: flex;
   align-items: flex-end;
}

将navbar_buttons显示为flex可以使您使用align-items: flex-end;，这会将其子代与容器的底部对齐，使它们与其余的导航链接对齐。

这是一个基于您的代码的有效Codepen示例：https://codepen.io/mmshr/pen/eaOWPW

右侧浮动元素

2 个答案: