如何修改HTML代码实现checkbox、label与input容器水平对齐

你当前使用的是VMware Clarity设计系统的表单组件，默认的clr-toggle-wrapper和clr-input-container为块级元素，自带的边距和布局规则会导致换行、垂直错位，按以下步骤调整即可：

1. 调整HTML结构 #

优先使用Clarity自带的栅格和对齐类实现布局，减少自定义样式侵入：

<div class="modal-body">
    <form #form="ngForm" class="clr-form clr-form-horizontal" autocomplete="off">
        <!-- 新增行容器，设置子元素垂直居中对齐 -->
        <div class="clr-row align-items-center">
            <!-- 开关容器使用自适应宽度，清除默认底部边距 -->
            <clr-toggle-wrapper class="clr-col-auto mb-0">
                <input type="checkbox" clrCheckbox (change)="toggleSelectPesticide1()" [(checked)]="pesticide1Selected"/>
                <label>
                    {{ "SITE.GET_LIDAR" | translate }} 
                </label>
            </clr-toggle-wrapper>
            <!-- 输入框容器占剩余宽度，清除默认底部边距 -->
            <clr-input-container class="clr-col mb-0">
                <input
                    required
                    maxlength="25" 
                    clrInput
                    type="text"
                    name="name2"
                    [(ngModel)]="iPesticidesDosesPasser.dose1"
                    #name2="ngModel"
                />
            </clr-input-container>
        </div>
    </form>
</div>

2. 补充可选自定义CSS #

如果使用上述结构后仍有轻微错位，可在全局样式或者组件样式中加入以下代码微调：

/* 统一开关区域和输入框的垂直对齐基准 */
clr-toggle-wrapper, clr-input-container {
  display: inline-flex;
  align-items: center;
}
/* 调整输入框最小宽度适配场景 */
clr-input-container input {
  min-width: 120px;
}

调整后可直接实现复选框、标签、输入框三者水平垂直居中对齐的效果，完全兼容Clarity表单的原有校验、响应式规则。

内容的提问来源于stack exchange，提问作者Amrmsmb