如何在不更改其基本模块 css 的情况下将 mat-list-item 水平对齐？

Question

我有一个mat-list迭代数据并显示我的要求是以水平方式对齐列表的方法。这可以通过使用简单的材料轻松实现，<ul>但我正在使用材料并希望利用mat-list它的功能。由于材质控件带有 CSS，如果我们想更改现有的外观和感觉，我们需要在基本 css 文件中更改它。我不想更改主mat-list-itemcss 文件，因为它在项目中的很多地方。我只是想mat-list-item水平对齐。

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




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

我是有角材料的新手，如果有人能提出一种实现它的好方法，我将不胜感激。我在其他地方找不到这样做的方法。

Answer 1

只需添加类似的类inline-list，mat-list然后将其更改为flex并在需要内联列表的位置使用该类即可。

不会影响其他列表

例子

<mat-list class="inline-list">
 <mat-list-item> Pepper </mat-list-item>
 <mat-list-item> Salt </mat-list-item>
 <mat-list-item> Paprika </mat-list-item>
</mat-list>


.mat-list-base.inline-list {
    display: flex;
}

float当你有时不要使用flex

<div class="row">
     <div class="col-8">
          <div>
            <mat-card>
              <mat-card-header>
                 <mat-card-title>Role Privilege</mat-card-title>
              </mat-card-header>
              <mat-card-content>
                 <mat-list class="inline-list">
                    <mat-list-item *ngFor="let privlege of userprivilege"> {{privlege}} </mat-list-item>
                  </mat-list>
               </mat-card-content>
             </mat-card>
         </div>
     </div>
  </div>