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

【问题标题】：I want show some item on right side in Navbar我想在导航栏的右侧显示一些项目
【发布时间】：2021-04-29 22:47:07
【问题描述】：

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

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

【问题讨论】：

标签： javascript html css twitter-bootstrap nav

【解决方案1】：

我添加了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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：