如何将Angular的Mat-Nav-List从默认垂直布局改为水平布局？

嘿，我之前在Angular 5项目里也碰到过这个需求！Mat-Nav-List默认确实是垂直布局，早期的Material文档确实没明确说明怎么改，但其实用CSS或者换更合适的组件就能轻松搞定，给你分享几个实用的方法：

这是最直接的方式，通过CSS修改<mat-nav-list>的布局属性，让它横向排列：

在你的navigation.component.css中添加以下样式：

/* 让导航列表变成横向flex布局 */
.mat-nav-list {
  display: flex;
  flex-direction: row;
  /* 可选：让列表项在容器内均匀分布，适合顶栏导航 */
  justify-content: flex-start;
}

/* 给每个列表项添加间距，避免挤在一起 */
.mat-list-item {
  margin-right: 16px;
  /* 让列表项内的内容垂直居中 */
  align-items: center;
}

如果你的组件启用了默认的ViewEncapsulation（Angular 5默认是开启的），样式可能无法穿透到Material组件内部，这时候可以用::ng-deep来强制生效：

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

::ng-deep .mat-list-item {
  margin-right: 16px;
}

其实Material Design有专门的水平导航组件——<mat-tab-nav-bar>，如果你的需求是顶部导航栏，这个组件比改造Mat-Nav-List更合适，它默认就是水平布局，还自带选中状态的交互效果（比如下划线动画）：

示例代码如下：

<nav mat-tab-nav-bar>
  <a 
    mat-tab-link
    *ngFor="let navItem of navigationItems"
    [active]="currentRoute === navItem.route"
    (click)="currentRoute = navItem.route"
    [routerLink]="navItem.route"
  >
    {{ navItem.label }}
  </a>
</nav>

你只需要在组件类里定义navigationItems数组和currentRoute变量，就能实现一个符合Material规范的水平导航栏。

如果不想改动Mat-Nav-List的默认样式，也可以直接用<mat-list-item>搭配自定义的flex容器：

<div class="horizontal-nav-container">
  <mat-list-item *ngFor="let item of navItems">
    <a matLine [routerLink]="item.link">{{ item.label }}</a>
  </mat-list-item>
</div>

然后在CSS里设置容器的布局：

.horizontal-nav-container {
  display: flex;
  flex-direction: row;
  gap: 16px; /* 用gap控制列表项之间的间距，比margin更方便 */
  padding: 0 16px; /* 可选：添加左右内边距 */
}

注意事项 #

• Angular 5对应的Material版本是5.x，完全支持Flexbox布局，不用担心兼容性问题；
• 如果使用路由跳转（routerLink），可以通过routerLinkActive指令给选中项添加自定义样式，增强交互体验；
• 如果你需要响应式布局，可以在CSS中添加媒体查询，在小屏幕上恢复垂直布局。

内容的提问来源于stack exchange，提问作者IntelligenceGuidedByExperience