我想在导航栏中的右侧显示一些项目

如何解决我想在导航栏中的右侧显示一些项目

 <div class="container d-flex align-items-center">

  <nav class="nav-menu d-flex align-items-center">
    <ul>
      <li class="active"><a href="index.html">Home</a></li>
              
      <li><a href="#"><i class="fa fa-id-badge"></i> SUBSCRIBE</a></li>
        
    </ul>
     <ul>
     <li><a href="#"><i class="fa fa-id-user"></i> Sign Up</a></li>
      <li><a href="#"><i class="fa fa-id-user"></i> login</a></li>
        
    </ul>
  </nav><!-- .nav-menu -->

这是我的代码，我想在右侧显示注册和登录

解决方法

我添加了 w-100 来扩展 nav 以适合整个容器，然后添加了 justify-content-between，它将子项定位为彼此之间具有所有空间...

 <div class="container d-flex align-items-center">

  <nav class="nav-menu d-flex w-100 justify-content-between">
    <ul>
      <li class="active"><a href="index.html">Home</a></li>         
      <li><a href="#"><i class="fa fa-id-badge"></i> SUBSCRIBE</a></li>
    </ul>
     <ul>
     <li><a href="#"><i class="fa fa-id-user"></i> Sign Up</a></li>
      <li><a href="#"><i class="fa fa-id-user"></i> login</a></li>
        
    </ul>
  </nav>
</div>

这里有一支笔来演示：https://codepen.io/paulmartin91/pen/gOgJeJZ

,

只有 CSS 才能使用 :last-child 选择器

ul {
  display:none;
}

ul:last-child {
  display: block;
}

 <div class="container d-flex align-items-center">

  <nav class="nav-menu d-flex align-items-center">
    <ul>
      <li class="active"><a href="index.html">Home</a></li>
              
      <li><a href="#"><i class="fa fa-id-badge"></i> SUBSCRIBE</a></li>
        
    </ul>
     <ul>
     <li><a href="#"><i class="fa fa-id-user"></i> Sign Up</a></li>
      <li><a href="#"><i class="fa fa-id-user"></i> login</a></li>
        
    </ul>
  </nav>
</div>

,

添加 float:right; css 规则

 <div class="container d-flex align-items-center">

  <nav class="nav-menu d-flex align-items-center">
    <ul>
      <li class="active"><a href="index.html">Home</a></li>
              
      <li><a href="#"><i class="fa fa-id-badge"></i> SUBSCRIBE</a></li>
        
    </ul>
     <ul>
     <li><a href="#"><i class="fa fa-id-user" style="float:right"></i> Sign Up</a></li>
      <li><a href="#"><i class="fa fa-id-user" style="float:right"></i> login</a></li>
        
    </ul>
  </nav><!-- .nav-menu -->