Mat-Nav-List horizontal instead of vertical?

Question

How do I make the following horizontal instead of the (apparent default) of vertical? It is located within navigation.component.html within my Angular 5.2.7 application that was generated via Angular-CLI 1.7.2. The documentation link included in the comment does not discuss how to layout a Material navigation bar horizontally.

<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

I used FlexBox setting fxLayout="row" (or just put in fxLayout as default is row)

<mat-nav-list fxLayout="row">
     <a mat-list-item href="#">One</a>
     <a mat-list-item href="#">Two</a>
</mat-nav-list>

However, this is using Angular Flex-Layout so an extra package

Answer 2

I was able to create a horizontal mat-nav-list by using some custom scss. I attach it using the class list-horizontal.

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

Here's the scss I used for list-horizontal:

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

Here's a Stackblitz to show it working with Angular Material 7.