html - 水平对齐不同类型的 Material 形状控制组件

我试图在列表中水平对齐单选框/复选框在不同类型的Angular Material窗体控件中。该列表混合了mat-list-option，mat-checkbox和mat-radio-button。我需要标签保持左对齐，而复选框/单选按钮则需要右对齐。

我试过使用fxLayouts“ row”和“ space-between”没有运气。我也尝试篡改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

最佳答案

您必须利用::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;
}