Angular Material 复选框对齐

Question

我有一个无法解决的对齐问题。我正在使用 Angular Material 复选框组件来显示选项列表，用户可以单击它们并选择多个选项。一切正常，但我遇到了一些我真的无法解决的样式问题。

最后我想要的是将所有复选框对齐到可用 space.

的右侧

有人对此有解决方案吗？

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 reference docs) 然后排除它的连锁反应，其中复选框已经在右侧对齐.

component.ts

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

component.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 组件，从而导致 example on StackBlitz .

StackBlitz 的结果：

Angular Material 复选框对齐

Angular Material checkbox alignment

css

checkbox

angular