Question

如何制作以下水平而不是垂直的（明显默认）？它位于我的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>

Answer 1

你必须浮动每个列表项

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

Answer 2

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

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

这是我用于list-horizontal的scs：

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

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

Answer 3

我最后用mat-tab-nav-bar结束了，因为至少在2018年8月中旬，Angular Material中似乎没有其他东西支持水平，左对齐，与Angular 6兼容的导航栏。

在我使用Angular-CLI 6.x，Angular 6.x和Angular Material 6.x组合而成的Angular Material Horizontal Navigation Bar Example中可以找到完整的Angular 6.x示例。

Answer 4

设置 mat-nav-list 以弯曲容器，然后调整 mat-list-item 的高度和填充

我正在使用角度/弯曲布局，但是您可以使用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>

Answer 5

这是我处理水平导航栏问题的方法：

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

对我来说，关键是调整宽度。希望这能奏效/帮助，加油！

Answer 6

我使用FlexBox设置fxLayout =“ row”（或仅将fxLayout设置为默认行）

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

但是，这是使用Angular Flex-Layout，因此需要一个额外的程序包

Answer 7

将容器的显示设置为flex，并且将 flex-direction 设置为row对我来说很成功。

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

还有SCSS文件：

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

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

7 个答案: