css - Angular Material : displaying icons to the right of mat-chip

Question

我有一个 mat-chip，里面有内容。我也有一个取消图标。我设置了mat-chip的固定宽度，所以我希望取消图标总是向右浮动。但是取消图标并没有向右浮动。我尝试了多种 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如果您想充分体验 Angular Material ，请进入 flexbox，因为有很多东西都在使用它。