Как выровнять элемент mat-list-item по горизонтали, не меняя его базовый модуль css?

Question

У меня есть mat-list, в котором я повторяю свои данные и показываю, что мне нужно выровнять список по горизонтали. Это может быть легко достигнуто с помощью простого <ul>, но я использую материал и хочу использовать его mat-list. Поскольку элементы управления материалом поставляются с включенным CSS, и если мы хотим изменить существующий внешний вид, мы должны изменить его в базовом файле css. Я не хочу менять основной файл mat-list-item css, так как он находится во многих местах проекта. Я просто хочу выровнять 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;
 }

Я новичок в angular материале, если кто-то может предложить хороший способ достичь его, был бы признателен. Я не нашел способ сделать это где-либо еще.

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>

Answer 2

Хорошо, если вы не хотите редактировать основной CSS, что никогда не является хорошей идеей. Вы можете написать свой собственный класс CSS для этого конкретного сценария. Это не повлияет на общий макет, а только на элементы списка, где вы его используете.

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

Посмотрите на эту блиц-ссылку стека.

https://stackblitz.com/edit/mat-list-horizontal