时间戳

首页 > 解决方案 > 将元素浮动到右侧

html - 将元素浮动到右侧

问题描述

 <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>

在上面的代码中，我希望类的 divnavbar__buttons浮动到右侧并与其他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;
  }

我希望带有类的 divnavbar__buttons向右浮动，并与其他导航栏项目在同一行

注意：我正在使用 css/scss

标签： htmlcsssass

解决方案

弹性盒

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>

推荐阅读