角度材料：在垫片右侧显示图标

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;
}

可以解决问题。如果您想充分体验有角度的素材，请consider this guide进入flexbox，因为有很多东西正在使用它。