CSS对齐材质设计单选按钮

Question

我正在使用单选按钮。 我期望的用户界面应该是

使用以下代码，

     <mat-radio-group name="employeeType" formControlName="employeeType" fxLayout="row">
                   <mat-radio-button *ngFor="let type of employeeTypes" (change)="showFieldByEmployeeType($event)"
                       [value]="type.name">
                       {{ type.name}}</mat-radio-button>
               </mat-radio-group>

但是我明白了，

是否有任何有用的CSS使它看起来像预期的CSS？

Answer 1

模板

 <mat-radio-group class="radio-parent" name="employeeType" 
formControlName="employeeType" 
fxLayout="row">
           <mat-radio-button class="radio-item" *ngFor="let type of employeeTypes" 
(change)="showFieldByEmployeeType($event)"
               [value]="type.name">
               {{ type.name}}</mat-radio-button>
       </mat-radio-group>

CSS

.radio-parent{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.radio-item{
 flex: 1 0 21%;
  margin: 5px;
 }

它不会生成完全类似的结构，您必须使用值才能获得所需的结构。