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

发布时间：2020-12-17 17:29:58 所属栏目：安全来源：网络整理

导读：如何使下面的水平而不是垂直的(明显的默认值)？它位于我的Angular 5.2.7应用程序中的navigation.component.html中,该应用程序是通过Angular-CLI 1.7.2生成的.注释中包含的文档链接不讨论如何水平布局材质导航栏. mat-nav-list !--https://material.angular.i

如何使下面的水平而不是垂直的(明显的默认值)？它位于我的Angular 5.2.7应用程序中的navigation.component.html中,该应用程序是通过Angular-CLI 1.7.2生成的.注释中包含的文档链接不讨论如何水平布局材质导航栏.

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

解决方法

你必须浮动每个列表项

在css文件中放：

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

在html文件中放入你的代码：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!