在<mat-list-item>中使用多个<mat-chip>标签
在<mat-list-item>中使用多个<mat-chip>标签
提问于 2019-11-09 07:47:50
我在标记<mat-list-item>中使用了多个<mat-chip>标记。我的问题是，下一个<mat-list-item>不会下移。它只是保持相同的位置，几乎是不可读的。我使用过matLine，但这似乎不是解决方案。
<mat-list>
<mat-list-item *ngFor="let message of messages">
<mat-icon matListIcon>folder</mat-icon>
<h3 matLine> {{message.from}} </h3>
<p matLine>
<span> {{message.subject}} </span>
<span class="demo-2">
<mat-chip-list>
<mat-chip color="primary" selected>Tag</mat-chip>
<mat-chip color="primary" selected>Tag</mat-chip>
<mat-chip color="primary" selected>Tag</mat-chip>
<mat-chip color="primary" selected>Tag</mat-chip>
<mat-chip color="primary" selected>Tag</mat-chip>
<mat-chip color="primary" selected>Tag</mat-chip>
<mat-chip color="primary" selected>Tag</mat-chip>
<mat-chip color="primary" selected>Tag</mat-chip>
<mat-chip color="primary" selected>Tag</mat-chip>
<mat-chip color="primary" selected>Tag</mat-chip>
<mat-chip color="primary" selected>Tag</mat-chip>
<mat-chip color="primary" selected>Tag</mat-chip>
<mat-chip color="primary" selected>Tag</mat-chip>
<mat-chip color="primary" selected>Tag</mat-chip>
<mat-chip color="primary" selected>Tag</mat-chip>
<mat-chip color="primary" selected>Tag</mat-chip>
<mat-chip color="primary" selected>Tag</mat-chip>
</mat-chip-list>
</span>
</p>
</mat-list-item>
</mat-list>请给自己拍张照片：https://stackblitz.com/edit/list-examples-jxhvsn?file=index.html
我该如何解决这个问题呢？
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-11-09 08:51:43
我发现问题出在身高上。
mat-list-item {
height: auto !important
}这样就可以解决它了。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58775072
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号