如何对齐 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 ：

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>

Answer 2

您可以将此类添加到表单中：

.form-wrapper {
  display: flex;
  justify-content: start;
  align-items: center; /* to center your items vertically*/
}

你的表格是这样的

<form #form="ngForm" class="clr-form  clr-form-horizontal form-wrapper" autocomplete="off">
 /* content here*/
</form>

Answer 3

我通过执行以下操作解决了它：

将id添加到输入 <input id="pesticide1Dose"

并将以下 css 代码分配给id ，如下所示：

pesticide1Dose{
position: absolute;
bottom: 10;
right:0px;
left: 150px;
top: 70px;
}