Angular 材质复选框 alignment

Question

我有一个无法解决的小 alignment 问题。 我正在使用 Angular Material 复选框组件来显示选项列表，用户可以单击它们并选择多个选项。 一切正常，但我面临着一些我真的无法解决的风格问题。

StackBlitz 上的代码示例

最后我想要的是将所有复选框对齐在可用空间的右侧。

有人对此有解决方案吗？

Answer 1

将此添加到您的 css 将起作用：

::ng-deep .mat-checkbox-inner-container {
  margin-right: 0 !important;

}

您需要使用.important 或通过在复选框上添加一个 id 并在选择器中使用它来增加您的选择器特异性。

Answer 2

解决此问题的一种简单方法是使用 Angular Material 的mat-selection-list （ Angular Material list API 参考文档），然后排除其右侧的波纹效果，其中复选框已对齐。

组件.ts

testItems: string[] = ['Test 1', 'Test 2', 'Test 3', 'Test 4', 'Test 5'];

组件.html

<mat-selection-list [disableRipple]="true" #item>
  <mat-list-option *ngFor="let test of testItems">
    {{test}}
  </mat-list-option>
</mat-selection-list>

这样做的好处是您不必处理默认mat-checkbox样式，并且mat-selection-list也是一个 Angular 组件，因此在StackBlitz 上有一个示例。

StackBlitz 的结果：