html - 右侧 float 元素

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 float 到右侧并与其他 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>