html - 修复角度复选框

Question

此UI由以下代码生成 ....表示复选框未正确对齐。它们显示在极左和极右。

<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

标签： htmlcssangularcheckboxlayout

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>