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

【问题标题】：Why are my navbar links appearing vertically rather than horizontal?为什么我的导航栏链接显示为垂直而不是水平？
【发布时间】：2020-04-04 16:37:04
【问题描述】：

我的导航链接显示如下：

/* 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>

而不是并排。

谁知道怎么做

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

【问题讨论】：

在li标签上设置float:left css属性，否则你可以使用flexlayout
如果您使用引导程序，只需遵循导航栏的指南。要在菜单中有一个活动状态类，并且您没有使用已经为它制作的功能的 CMS，您必须执行以下操作：stackoverflow.com/a/13338058/9225418

标签： html css angular twitter-bootstrap

【解决方案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>

注意： 使 sn-p 全宽并检查它是否可以正常工作。如果您想在小型设备中制作同一行中的所有链接，还需要为此制作媒体 css。

希望对你有帮助。

谢谢...

【讨论】：

你好，伙计，请在这里重播这个答案对你有用吗？
如果您没有时间在这里查看答案，那么为什么您在这里发布您的问题来浪费其他人的时间？
您好，对不起，我工作很忙。这解决了我的部分问题 - 链接颜色现在反映了活动页面。但是，链接垂直显示的问题仍然存在。
是的，但不是在大屏幕上，这个问题只适用于小型设备屏幕，对吗？
好的，太好了，现在您的问题已经完全解决了吧？

【解决方案2】：

在li 上尝试inline-block

/* 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-item{
  display: inline-block;
  margin-right: 10px;
}

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

第二次尝试这个RouterLink does not work

【讨论】：

【解决方案3】：

这是因为无序列表 (<ul><li></li></ul>) 的默认行为是垂直堆叠。一种不同样式的方法是使其父元素具有弹性，并以您喜欢的方式证明它是子元素。在以下示例中，这是使用 flex 完成的：

.navbar-custom {
    background-color: #4082e485;
}

.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
    color: rgba(255,255,255,.8);
}

.navbar-custom .navbar-nav .nav-link {
    color: rgba(255,255,255,.5);
}

.navbar-custom .nav-item.active .nav-link{
  color: #ffffff !important;
}

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

/* added code to make the navigation horizontal */
#navbarNav {
  display: flex;
  justify-content: center;
  align-items: center;
}
.navbar-nav {
  display: flex;
  justify-content: space-evenly;
}

.navbar-nav li {
  list-style-type: none;
  padding: 0 15px;
}

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

【讨论】：

我让它与您的解决方案一起使用 - 但它缺少一件事。我还必须添加 flex-direction: row;到 css 中的 navbar-nav 元素。在原始引导程序中，这被设置为列，这会导致问题。

【解决方案4】：

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main_nav">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="main_nav">
   <ul class="navbar-nav">
     <li class="nav-item active"> <a class="nav-link" href="#">Home </a> </li>
     <li class="nav-item"><a class="nav-link" href="#"> About </a></li>
     <li class="nav-item"><a class="nav-link" href="#"> Services </a></li>
   </ul>
  </div> <!-- navbar-collapse.// -->
</nav>

这里有更多导航栏示例导航栏家关于服务

这里有更多导航栏示例https://bootstrap-menu.com/index.html

【讨论】：