时间戳

首页 > 解决方案 > Css 对齐材料设计单选按钮

css - Css 对齐材料设计单选按钮

问题描述

我正在使用垫单选按钮。我预期的用户界面应该是这样的，

文件

使用以下代码，

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

但我得到，

文件2

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

标签： cssradio-buttonmaterial-designangular8

解决方案

模板 

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

它不会生成完全相同的结构，您必须使用值来获得所需的结构。

推荐阅读