导航栏固定响应导航栏

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

如果你问的是我认为你在问的问题，那就行了。事实上，你有很多链接可能会改变结果，所以请记住这一点。