有角度的材料:在垫子芯片的右侧显示图标

Question

我有一个垫子芯片，里面有内容。还有一个取消图标。我将垫子芯片设置为固定宽度，所以我希望取消图标始终向右浮动。但取消图标并没有浮动到右侧。我尝试了多种css技术，但都没有成功。

<mat-chip *ngIf= "item?.name">
{{ item.name}}
<mat-icon matChipRemove (click)="removeAssignments(dataItem)">cancel</mat-icon>
</mat-chip>

Answer 1

好的mat-chip有display: inline-flex作为属性，因此您需要使用与flex相关的属性来操作子元素。对于您的案例：

mat-chip {
justify-content: space-between;
}

会成功的。如果你想充分体验棱角分明的材料，可以考虑将本指南纳入flexbox，因为有很多东西都在使用它。

Answer 2

将图标移动到项目之前({{ item.name}}(：

<mat-chip *ngIf= "item?.name">
<mat-icon matChipRemove (click)="removeAssignments(dataItem)">cancel</mat-icon>
{{ item.name}}
</mat-chip>