提问者:小点点

我想显示一些项目在右侧的肚脐


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

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


共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