角导航栏问题

Question

我在Angular上进行一个项目，并且在导航栏上有问题。

我要发布两个屏幕截图，第一个显示登录之前的状态，而第二个则显示登录管理员时的状态。 在第一个中，我希望“注册”，“登录”的格式就像左侧的字母一样，并在同一行中。

在第二个中，我希望“管理面板”进入上面的同一行。

1

2

这是代码：

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Auction App</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a routerLink='/home'>Home</a></li>
      
      <li ><a routerLink='/myAuctions'>MyAuctions</a></li>
      <li><a href="#">MyOffers</a></li>
      <li><a href="#">Messages</a></li>
      <div *ngIf="checkIfAdminisLoggedIn() === true;">
        <li><a routerLink='/board-admin'><span class="glyphicon glyphicon-user"></span> Admin Panel</a></li>
      </div>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <div *ngIf="isLoggedIn === false; else elseBlock">
        <li><a routerLink='/register' href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a routerLink='/login'> <span class="glyphicon glyphicon-log-in"></span>Login</a></li>
      </div>
      <ng-template #elseBlock>
        <li><a (click)="onLogout()"><span class="glyphicon glyphicon-log-in"></span> Logout</a></li>
      </ng-template>
    </ul>
  </div>
</nav>

CSS

.ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

Answer 1

您的管理面板在Navbar的左侧有东西。您必须像这样将其放在右边，并且它应该工作。

    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">Auction App</a>
        </div>
        <ul class="nav navbar-nav">
          <li class="active"><a routerLink='/home'>Home</a></li>
          
          <li ><a routerLink='/myAuctions'>MyAuctions</a></li>
          <li><a href="#">MyOffers</a></li>
          <li><a href="#">Messages</a></li>
          
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <div *ngIf="isLoggedIn === false; else elseBlock">
            <li><a routerLink='/register' href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
            <li><a routerLink='/login'> <span class="glyphicon glyphicon-log-in"></span>Login</a></li>
          </div>
<div *ngIf="checkIfAdminisLoggedIn() === true;">
            <li><a routerLink='/board-admin'><span class="glyphicon glyphicon-user"></span> Admin Panel</a></li>
          </div>
          <ng-template #elseBlock>
            <li><a (click)="onLogout()"><span class="glyphicon glyphicon-log-in"></span> Logout</a></li>
          </ng-template>
        </ul>
      </div>
    </nav>

为了去除蓝色（访问时紫色），您必须这样做：

a, a:hover, a:focus, a:active {
    text-decoration: none;
    color: inherit;
}

将其适应最适合您的任何东西。