如何在不改变其基本模块css的情况下将垫子列表项对齐到水平？
如何在不改变其基本模块css的情况下将垫子列表项对齐到水平？
提问于 2020-01-09 08:34:31
我有一个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;
}我对角质材料很陌生，如果有人能提出一个很好的方法来实现它，我会很感激的。我找不到其他地方做这件事的方法。
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-01-09 09:16:47
只需将类似于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
<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>
Stack Overflow用户
发布于 2020-01-09 08:54:39
好吧，如果你不想编辑主要的CSS，这绝不是一个好主意。您可以为这个特定的场景编写自己的CSS类。它不会影响整体布局，而只会影响您使用它的列表项。
.horizontal-mat-list-item {
float: right;
display: list-item;
}看看这个堆栈闪电战链接。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59659929
复制相关文章
相似问题
腾讯云开发者
