Mat-Nav-List horizontal instead of vertical?

问题

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>

回答1:

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.

回答2:

you have to float each list item

in css file put:

.mat-list-item {
  float: right;
}

in html file put your code:

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

回答3:

I wound up using mat-tab-nav-bar, since nothing else in Angular Material seems to support horizontal, left-justified, Angular 6-compatible navigation bars, at least as of mid-August 2018.

A full Angular 6.x example can be found in the Angular Material Horizontal Navigation Bar Example I put together using Angular-CLI 6.x, Angular 6.x and Angular Material 6.x.

回答4:

Set mat-nav-list to flex container then adjust mat-list-item height and padding

I am using angular/flex-layout but you can achieve the same with css/scss

<mat-nav-list fxLayout>
<mat-list-item fxFlex>
    <a [routerLink]="['/home']">Home</a>
</mat-list-item>
<mat-list-item fxFlex>
    <a [routerLink]="['/about']">About</a>
</mat-list-item>
<mat-list-item fxFlex>
    <a [routerLink]="['/contact']">Contact Us</a>
</mat-list-item> </mat-nav-list>

回答5:

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

回答6:

Here's what I did to handle that horizontal navbar issue:

<mat-nav-list class="lists_class">
 <a routerLink="link" mat-list-item matLine class="link_class">name</a>
<mat-nav-list>

.lists_class {
    width: 100%;
}
.link_class {
    display: inline;
    float: left;
    width: min-content;
}

The key for me was adjusting the width. Hope this works/helps, cheers!

回答7:

Setting the container's display to flex and the it's flex-direction to row did the trick for me.

<mat-nav-list class="list-horizontal">
     <a mat-list-item href="#">Home</a>
     <a mat-list-item href="#">About</a>
</mat-nav-list>

And the SCSS file:

mat-nav-list.list-horizontal {
 display: flex;
 flex-direction: row;
}

来源：https://stackoverflow.com/questions/49161039/mat-nav-list-horizontal-instead-of-vertical

标签

angular

angular-material