水平对齐不同类型的材料形式控制组件

Question

我正在尝试水平对齐列表中不同类型的 Angular Material 表单控件中的单选/复选框。该列表是 mat-list-option、mat-checkbox 和 mat-radio-button 的组合。我需要标签左对齐，而复选框/单选按钮右对齐。

我试过使用 fxLayouts“行”和“空格”，但没有运气。我也尝试过篡改 CSS，但似乎无法正确处理。我创建了一个 StackBlitz：https://stackblitz.com/edit/material-6-kj87kz

<mat-selection-list>
  <ng-container *ngFor="let text of texts">
    <mat-list-option [checkboxPosition]="'after'">
      {{ text }}
    </mat-list-option>
    <div style="padding: 0 16px">
      <mat-checkbox *ngIf="isCheckbox" fxLayout="row" fxLayoutAlign="space-between center">
        {{ text }}
      </mat-checkbox>
      <mat-radio-group *ngIf="isRadioGroup" fxLayout="column" fxLayoutAlign="space-between center">
        <mat-radio-button *ngFor="let subText of subTexts" fxLayout="row" [labelPosition]="'before'">
        {{ subText }}
        </mat-radio-button>
      </mat-radio-group>
    </div>
  </ng-container>
</mat-selection-list>

请注意，我已经从代码中删除了绑定、条件和操作，以保持简单。这是我目前得到的：

如您所见，我很难让控件对齐。有谁知道如何做到这一点的好方法？

StackBlitz：https://stackblitz.com/edit/material-6-kj87kz

Answer 1

您必须使用::ng-deep 选择器来更改表​​单复选框和单选组件的css。结果如下：

stackblitz

.mat-checkbox,
.mat-radio-group {
  height: 48px;
  padding: 0 16px;
  display: flex;
  align-items: center;
}

:host ::ng-deep .mat-checkbox-layout {
  display: flex;  
  width: 100%;
  justify-content: space-between;
}

:host ::ng-deep .mat-checkbox-label-before .mat-checkbox-inner-container {
  margin-right: 0;
}

.mat-radio-group {
  align-items: flex-start;
  flex-direction: column;
}

.mat-radio-button {
  width: 100%;
  height: 48px;

  display: flex;
  align-items: center;
}

:host ::ng-deep .mat-radio-label {
  width: 100%;
  display: flex;
  justify-content: space-between;
}