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

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>

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

如您所见，我很难让控件对齐。有谁知道如何实现这一目标的好方法？

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

Answer 1

您必须使用 ::ng-deep 选择器来更改表​​单复选框和单选组件的 css。加上一些 flex 和 space-between，结果如下:

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;
}