Navbar-固定響應式導航欄

Question

我正在嘗試實現一個導航欄，並且我想在三個不同的位置（左對齊、右對齊和居中）position 幾個元素。

左邊是默認的，但我不能在中間制作元素，在屏幕右邊（用於登錄和注銷），有人可以幫我解決我的問題並了解我需要添加的內容嗎？

響應式 Navabr 僅適用於 HTML 和 CSS。

謝謝！

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

如果你問我認為你在問什么，那應該可行。 您擁有大量鏈接這一事實可能會改變結果的樣子，因此請記住這一點。