angular - Mat-Nav-List 水平而不是垂直？

Question

如何使以下水平而不是(明显的默认)垂直？它位于我的 Angular 5.2.7 应用程序中的 navigation.component.html 中，该应用程序是通过 Angular-CLI 1.7.2 生成的。评论中包含的文档链接没有讨论如何水平布局 Material 导航栏。

<mat-nav-list>
  <!--https://material.angular.io/components/list/overview-->
  <mat-list-item>
    <a [routerLink]="['/home']">Home</a>
  </mat-list-item>
  <mat-list-item>
    <a [routerLink]="['/about']">About</a>
  </mat-list-item>
  <mat-list-item>
    <a [routerLink]="['/contact']">Contact Us</a>
  </mat-list-item>
</mat-nav-list>

Answer 1

我能够通过使用一些自定义 scss 创建水平 mat-nav-list。我使用 list-horizo​​ntal 类附加它。

<mat-nav-list class="list-horizontal">
  ...
</mat-nav-list>

这是我用于 list-horizo​​ntal 的 scss:

mat-nav-list.list-horizontal {
  padding: 0;
  .mat-list-item {
    display: inline-block;
    height: auto;
    width: auto;
  }
}

Here's a Stackblitz展示它与 Angular Material 7 的配合使用。