angular 导航栏问题

Question

我在 angular 从事一个项目，但导航栏有问题。

我发两张截图，一张是登录前的状态，第二张是管理员登录后的状态。在第一个中，我希望“注册”、“登录”的格式像左边的字母一样，并且在同一行。

在第 2 行，我希望“管理面板”与上面在同一行。

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

您的管理面板位于导航栏的左侧。你必须把它放在你的右边，像这样，它应该有效。

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

将 CSS 调整为最适合您的任何内容。

angular 导航栏问题

angular navigation bar issue

css

navigation

angular