如何让复选框和标签在 React 的表单中对齐？

Question

我很难让此表单上的标签在复选框旁边对齐。我使用 React 和 React-Hook-Form 进行验证和状态管理（这里是 github：https://github.com/cipdv/ciprmt-mern/blob/main/client/src/components/User/HHForm/RFHHHForm.js 如果有帮助，带有表单的文件称为 RFHHHForm.js）。

我尝试了一些方法：

1. 我尝试像这样使用语义 ui 的库：

<div className='inline field'>
                    <div className='ui checkbox'>
                        <input defaultChecked={healthHistory?.epilepsy} name="epilepsy" type="checkbox" id="epilepsy" {...register('epilepsy')} />
                        <label>Epilepsy</label>
                    </div>
                    <div className='ui checkbox'>
                        <input defaultChecked={healthHistory?.diabetes} name="diabetes" type="checkbox" id="diabetes" {...register('diabetes')} />
                        <label>Diabetes</label>
                    </div>

当我使用它时，标签和复选框排成一行，但由于某种原因，复选框变得不可编辑（无法选中或取消选中）。

我尝试像这样制作自己的 css 样式表模块：

input[type="checkbox"]
{
    vertical-align:middle;
}

label,input{
    display: inline-block;
    vertical-align: middle;
}

但这似乎对排列任何东西都不起作用。

Answer 1

您可以尝试将输入包装在标签内

<label>Diabetes &nbsp; <input defaultChecked={healthHistory?.diabetes} name="diabetes" type="checkbox" id="diabetes" {...register('diabetes')} /></label> 

或者你可以使用你的复选框类

.checkbox{
  display: flex;
  align-items: center;
}

让我知道它是否有效。