我怎样才能让复选框和标签在 React 的表单中对齐？

Question

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

我已经尝试了一些方法：

我试过像这样使用语义 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>

或者用你的复选框class你可以

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

让我知道它是否有效。

我怎样才能让复选框和标签在 React 的表单中对齐？

How can I get the checkbox and label to line up in a form with React?

css

reactjs

forms

react-hook-form