我怎样才能让复选框和标签在 React 的表单中对齐?
How can I get the checkbox and label to line up in a form with React?
我很难让此表单上的标签与复选框对齐。我将 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;
}
但这似乎并不能解决任何问题。
您可以尝试将输入包裹在标签内
<label>Diabetes <input defaultChecked={healthHistory?.diabetes} name="diabetes" type="checkbox" id="diabetes" {...register('diabetes')} /></label>
或者用你的复选框class你可以
.checkbox{
display: flex;
align-items: center;
}
让我知道它是否有效。
我很难让此表单上的标签与复选框对齐。我将 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;
}
但这似乎并不能解决任何问题。
您可以尝试将输入包裹在标签内
<label>Diabetes <input defaultChecked={healthHistory?.diabetes} name="diabetes" type="checkbox" id="diabetes" {...register('diabetes')} /></label>
或者用你的复选框class你可以
.checkbox{
display: flex;
align-items: center;
}
让我知道它是否有效。