如何對齊 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;
}