css - 如何摆脱 Angular Material 芯片上 100% 的水平宽度？

Question

我正在处理一个 Angular Material 元素并遇到了一个问题。我正在尝试使用垂直堆叠的芯片，但是当我使用预定义代码时，芯片的宽度为 100%。有没有办法在 mat-chip-list-stacked 类中取消设置宽度值？我不希望芯片是全水平宽度。

<mat-chip-list class="mat-chip-list-stacked" aria-orientation="vertical">
  <mat-chip>Papadum</mat-chip>
  <mat-chip>Naan</mat-chip>
  <mat-chip>Dal</mat-chip>
</mat-chip-list>

这是代码的样子:



这就是我希望代码的样子:

Answer 1

要取消设置宽度，我们可以使用下面的 css。

.mat-chip-list .mat-chip {
  width: auto;
  min-width: 0;
}