html - 如何对齐 checkbox.label 并水平输入

Question

如何修改下面发布的 html 代码以使所有复选框、标签和输入容器水平对齐。下面发布的代码为我提供了屏幕截图所示的对齐方式。

代码：

 <div class="modal-body">
            <form #form="ngForm" class="clr-form  clr-form-horizontal" autocomplete="off">
                <clr-toggle-wrapper>
                <input  type="checkbox" clrCheckbox  (change)="toggleSelectPesticide1()"  [(checked)]="pesticide1Selected"/>
                <label >
                    {{ "SITE.GET_LIDAR" | translate }} 
                </label>
                </clr-toggle-wrapper>
                <clr-input-container>
                    <input
                    required
                    maxlength="25" 
                    clrInput
                    type="text"
                    name="name2"
                    [(ngModel)]=iPesticidesDosesPasser.dose1
                    #name2="ngModel"
                />
            </clr-input-container>
            </form>
        </div>

图片：

更新_1：

标签： htmlcssangular

Answer 1

我不确定，但你试试这个：

<div class="modal-body">
            <form #form="ngForm" class="clr-form  clr-form-horizontal" autocomplete="off" style="display: flex">
                <clr-toggle-wrapper>
                <input  type="checkbox" clrCheckbox  (change)="toggleSelectPesticide1()"  [(checked)]="pesticide1Selected"/>
                <label >
                    {{ "SITE.GET_LIDAR" | translate }} 
                </label>
                </clr-toggle-wrapper>
                <clr-input-container>
                    <input
                    required
                    maxlength="25" 
                    clrInput
                    type="text"
                    name="name2"
                    [(ngModel)]=iPesticidesDosesPasser.dose1
                    #name2="ngModel"
                />
            </clr-input-container>
            </form>
        </div>