html - 为什么我的导航栏链接是垂直显示的而不是水平显示的？

Question

我的导航链接是这样显示的:

/* You can add global styles to this file, and also import other style files */
@import '@angular/material/prebuilt-themes/deeppurple-amber.css';
@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css';

 mark {
    background-color: yellow !important;
    color: black;
  }

  .navbar-custom {
    background-color: #4082e485;
}
/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
    color: rgba(255,255,255,.8);
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
    color: rgba(255,255,255,.5);
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link{
  color: #ffffff !important;
}

.navbar-custom .nav-item:hover .nav-link {
  color: blue !important;
}

<nav class="navbar navbar-custom">
  <div class="container" id="navbarNav">
  <a class="navbar-brand" routerLinkActive="active" [routerLink]="['/']"><fa-icon [icon]="faGlobeAmericas"></fa-icon>  Offshore</a>
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" routerLinkActive="active" [routerLink]="['/']"><fa-icon [icon]="faHome"></fa-icon>  Home</a>
    </li>
    <li class="nav-item active">
        <a class="nav-link" routerLinkActive="active" [routerLink]="['/results']" ><fa-icon [icon]="faSearch"></fa-icon>  Search</a>
    </li>
    <li class="nav-item active">
        <a class="nav-link" routerLinkActive="active" [routerLink]="['/links']" ><fa-icon [icon]="faLink"></fa-icon>  Links</a>
    </li>
  </ul>
</div>
</nav>

而不是并排。

谁知道怎么办

1. 修复此问题，使链接水平显示。
2. 当我将鼠标悬停在导航链接上时，导航链接的颜色确实会发生变化，但它们并不能反射(reflect)我当前所在的页面 - 所以如果我也能使用它，那就太好了。

Answer 1

你只需要添加 nav类别为 <ul class="navbar-nav">您的问题将得到解决。

@import '@angular/material/prebuilt-themes/deeppurple-amber.css';
@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css';
mark {
  background-color: yellow !important;
  color: black;
}
.navbar-custom {
  background-color: #4082e485;
}
/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
  color: rgba(255,255,255,.8);
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
  color: rgba(255,255,255,.5);
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link{
  color: #ffffff !important;
}

.navbar-custom .nav-item:hover .nav-link {
  color: blue !important;
}

<nav class="navbar navbar-custom">
  <div class="container" id="navbarNav">
    <a class="navbar-brand" routerLinkActive="active" [routerLink]="['/']"><fa-icon [icon]="faGlobeAmericas"></fa-icon>  Offshore</a>
    <ul class="navbar-nav nav">
      <li class="nav-item active">
        <a class="nav-link" routerLinkActive="active" [routerLink]="['/']"><fa-icon [icon]="faHome"></fa-icon>  Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLinkActive="active" [routerLink]="['/results']" ><fa-icon [icon]="faSearch"></fa-icon>  Search</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLinkActive="active" [routerLink]="['/links']" ><fa-icon [icon]="faLink"></fa-icon>  Links</a>
      </li>
    </ul>
  </div>
</nav>

注意:将代码段设为全宽并检查它是否完美。如果你想在小型设备中将所有链接都放在同一行中，你还需要为此制作媒体 css。

希望对您有所帮助。

谢谢你...