如何在不修改基础模块CSS的情况下将mat-list-item水平对齐？

嘿，刚上手Angular Material遇到样式问题很正常，别慌！要让单个mat-list的列表项水平排列，同时不改动全局CSS影响其他组件，我们可以用组件级样式+自定义类的方式来实现，下面给你两个靠谱的方案：

方案一：Flex布局（推荐） #

这是最现代也最可控的方式，只需要给目标mat-list加一个自定义类，然后在组件专属的CSS里写样式即可：

第一步：给mat-list添加自定义类 #

修改你的模板代码，给<mat-list>加上唯一的类名（比如horizontal-privilege-list），避免和其他mat-list冲突：

<mat-list class="horizontal-privilege-list">
  <mat-list-item *ngFor="let privilege of userprivilege">
    {{privilege}}
  </mat-list-item>
</mat-list>

第二步：编写组件级样式 #

打开当前组件的CSS文件（比如your-component.component.css，不是项目根目录的styles.css），添加以下样式：

/* 把列表容器改成flex行布局 */
.horizontal-privilege-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; /* 可选：如果权限项太多，自动换行 */
  gap: 16px; /* 可选：设置项之间的间距，比margin更方便 */
}

/* 调整列表项的默认样式，避免拉伸 */
.horizontal-privilege-list mat-list-item {
  flex: 0 0 auto; /* 保持项的原始宽度，不被拉伸 */
  align-items: center; /* 垂直居中内容 */
}

这种方式的好处是：样式只会作用于当前组件中带这个类的mat-list，完全不会影响项目里其他地方的mat-list组件。

方案二：调整display属性（简化版） #

如果不需要flex的高级特性，也可以直接修改列表项的display属性，但同样要通过自定义类来限定范围：

<mat-list class="horizontal-privilege-list">
  <mat-list-item *ngFor="let privilege of userprivilege">
    {{privilege}}
  </mat-list-item>
</mat-list>

组件级CSS：

.horizontal-privilege-list mat-list-item {
  display: inline-block;
  margin-right: 16px;
}

/* 可选：移除列表的默认内边距 */
.horizontal-privilege-list {
  padding-left: 0;
}

这个方式更简单，但flex布局的灵活性更强，推荐优先用方案一。

注意事项 #

• 一定要把样式写在组件专属的CSS文件里，而不是全局的styles.css，这样才能保证样式只作用于当前列表。
• 如果需要调整对齐方式（比如居中、两端对齐），可以给.horizontal-privilege-list添加justify-content属性，比如justify-content: center;实现水平居中。

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