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

Question

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

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

$name = \App\Order::whereBetween('working_time',[Carbon::today()->startOfWeek(),Carbon::today()->endOfWeek()])->get();

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

如您所见，我很难使控件保持一致。有人知道如何实现这一目标的好方法吗？

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