Mat-Nav-List 水平而不是垂直? [英] Mat-Nav-List horizontal instead of vertical?
问题描述
如何使下面的水平而不是垂直的(明显默认)?它位于我的 Angular 5.2.7 应用程序中的 navigation.component.html 中,该应用程序是通过 Angular-CLI 1.7.2 生成的.评论中包含的文档链接没有讨论如何水平布局 Material 导航栏.
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>
推荐答案
我能够通过使用一些自定义 scss 创建一个水平的 mat-nav-list
.我使用 list-horizontal
类附加它.
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>
这是我用于 list-horizontal
的 scss:
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;
}
}
这是一个 Stackblitz 来展示它与 Angular Material 7 的配合.
Here's a Stackblitz to show it working with Angular Material 7.
这篇关于Mat-Nav-List 水平而不是垂直?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!