修复角度复选框

Question

这个 UI 是由以下代码生成的 ....表示 checkboxes 没有正确对齐。它们显示在极左和极右。

<div class="sample">
        <div align="left" class="user-modified-rule">
            <mat-checkbox (change)="changeSelectionTo()" [(ngModel)]="isChangeRule"></mat-checkbox>
            <rule> </rule>
       </div>
        <div class="ruleSpearator"> OR</div>
        <div align="right" class="production-stage-rule">
            <mat-checkbox (change)="changeSelectionTo()" [(ngModel)]="isOriginalRule"></mat-checkbox>
            <rule> </rule>

        </div>
</div>

我想要如下图所示的UI 我需要将复选框与<rule> 对齐，如代码所示

如果我更改代码

<mat-checkbox></mat-checkbox>
<rule></rule>

到

<mat-checkbox>
   <rule></rule>
</mat-checkbox>```

then entire rule becomes clickable..means any where click on rule , does the checkbox check and uncheck , which i do not want to

Answer 1

你可以使用角度弹性布局

从 '@angular/flex-layout' 导入 { FlexLayoutModule }；

<div fxLayout="row" fxLayoutGap="20px">
    <div fxFlex="50px">    
        <mat-checkbox></mat-checkbox>
    </div>
    <div fxFlex>
        <rule></rule>
    </div>
</div>