Navbar-固定响应式导航栏

Question

我正在尝试实现一个导航栏，我想将几​​个元素定位在三个不同的位置（左对齐、右对齐和居中）。

左边是默认的，但是我不能把元素放在中间，右边（用于登录和注销）在屏幕上，有人可以帮我解决我的问题并了解我需要做什么添加？

是一个仅使用 HTML 和 CSS 的响应式 Navabr。

谢谢！

HTML 和 CSS

.menu .left{
    float: left;
    margin-left: 1em;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
}

html {
    font-family: "helvetica neue", sans-serif;
}

.nav {
    border-bottom: 1px solid #EAEAEB;
    text-align: right;
    height: 70px;
    line-height: 70px;
 }

.menu {
    margin: 0 30px 0 0; 
}

.menu a {
    clear: right;
    text-decoration: none;
    color: gray;
    margin: 0 10px;
    line-height: 70px;
    
}

span {
    color: #191970;
}

label {
    margin: 0 40px 0 0;
    font-size: 26px;
    line-height: 70px;
    display: none;
    width: 26px;
    float: right;
}

#toggle {
    display: none;
}

@media only screen and (max-width: 500px) {
    label {
        display: block;
        cursor: pointer;
    }

    .menu {
        text-align: center;
        width: 100%;
        display: none;
    }

    .menu a {
        display: block;
        border-bottom: 1px solid #EAEAEB;
        margin: 0;    
    }

    #toggle:checked + .menu {
        display: block;
    }
    
    }

<div class="nav">
      <label for="toggle">&#9776;</label>
      <input type="checkbox" id="toggle"/>
    
      <div class="menu" >
      
        <a href="#"  ><i class="fa fa-heartbeat" aria-hidden="true"></i><span >Appel-Lib</span></a>
     
     
        <a href="/home"  routerLink="home">
          <i class="fa fa-hospital-o" aria-hidden="true"></i>
          Home</a>
        
        <a href="/admin"   *ngIf="showAdminBoard"  routerLink="admin">
          <i class="fa fa-tachometer" aria-hidden="true"></i>
           Admin Board </a>

        <a href="/mod" *ngIf="showModeratorBoard"  routerLink="mod">Moderator Board</a>
        <a href="/user"  *ngIf="isLoggedIn" routerLink="user">
          <i class="fa fa-user-circle" aria-hidden="true"></i>
          User</a>

        <a href="/register" *ngIf="!isLoggedIn" routerLink="register">
          <i class="fa fa-user-plus" aria-hidden="true"></i>

          Sign Up</a>   

        <a href="/signuppatient" *ngIf="isLoggedIn" routerLink="signuppatient">
          <i class="fa fa-plus-square" aria-hidden="true"></i>
           Patient</a>

        <a href="/login" *ngIf="!isLoggedIn" routerLink="login">
          <i class="fa fa-fw fa-user"></i>
          Login
        </a>
        <a href="/profile" *ngIf="isLoggedIn" routerLink="profile">{{ username }}</a>
        <a href  *ngIf="isLoggedIn" (click)="logout()">
          <i class="fa fa-sign-out" aria-hidden="true"></i>
          LogOut</a>
  
          
      </div>
      <router-outlet></router-outlet>
  </div>

Answer 1

首先，你需要把具体的链接放到Ul和Li。例如，对于正确的组，您应该输入：

<ul class="right-group">
   <li>
      <a href="/register" *ngIf="!isLoggedIn" routerLink="register">
         <i class="fa fa-user-plus" aria-hidden="true"></i>
      Sign Up</a>
   </li>
   <li>
      <a href="/login" *ngIf="!isLoggedIn" routerLink="login">
         <i class="fa fa-fw fa-user"></i>
      Login</a>
   </li>
   <li>
        <a href  *ngIf="isLoggedIn" (click)="logout()">
          <i class="fa fa-sign-out" aria-hidden="true"></i>
        LogOut</a>
   </li>
</ul>

那么你应该做的是样式化 ul:

.right-group {
   display: flex;
   flex-direction: row;
   align-items: center;
   height: /* the height of your navbar */;
   width: 100%;
   justify-content: right; /* this should change depending on where you want your group to be (ex: left, right, center) */
   list-style: none;
}

如果你问我认为你在问什么，那应该可以。您拥有大量链接这一事实可能会改变结果的样子，因此请记住这一点。