Formik的内联复选框标签

Question

如何在复选框字段上显示该表以与复选框一起显示内嵌（在同一水平线上）？

                <div className="form-group">
                    <label htmlFor="consent">You must accept the <Link to={'/Terms'}>Terms of Use</Link> and <Link to={'/Privacy'}>Privacy Policy</Link></label>
                    <Field name="consent"  type="checkbox" className={'form-control' + (errors.consent && touched.consent ? ' is-invalid' : '')} />
                    <ErrorMessage name="consent" component="div" className="invalid-feedback" />
                </div>

注意 - 在我问这个问题之前，我尝试过标准的CSS。我无法看到强制内联样式的位置：

const style4 = {
    display: 'inline-block'
}

尝试使用表单组上的标准CSS

            <div className="form-group" style={style4}  >
                <label  htmlFor="consent">You must accept the <Link to={'/Terms'}>Terms of Use</Link> and <Link to={'/Privacy'}>Privacy Policy</Link> </label>
                <Field name="consent" type="checkbox" className={'form-control' + (errors.consent && touched.consent ? ' is-invalid' : '')} />
                <ErrorMessage name="consent" component="div" className="invalid-feedback" />
            </div>

尝试使用表单组标签上的标准CSS

<div className="form-group" >
                        <label style={style4}  htmlFor="consent">You must accept the <Link to={'/Terms'}>Terms of Use</Link> and <Link to={'/Privacy'}>Privacy Policy</Link> </label>
                        <Field name="consent" type="checkbox" className={'form-control' + (errors.consent && touched.consent ? ' is-invalid' : '')} />
                        <ErrorMessage name="consent" component="div" className="invalid-feedback" />
                    </div>

在表单组字段上尝试使用标准CSS

<div className="form-group" >
                    <label  htmlFor="consent">You must accept the <Link to={'/Terms'}>Terms of Use</Link> and <Link to={'/Privacy'}>Privacy Policy</Link> </label>
                    <Field name="consent" style={style4} type="checkbox" className={'form-control' + (errors.consent && touched.consent ? ' is-invalid' : '')} />
                    <ErrorMessage name="consent" component="div" className="invalid-feedback" />
                </div>

Answer 1

这纯粹是一个css问题。将display: inline-block添加到要保留在同一行中的元素

Answer 2

万一它可以帮助某人：

Form.css

.checkbox_label_wrapper {
  display: flex;
}

.checkbox-wrapper {
  display: flex;
  align-self: center;
}

.checkbox {
  width: 20px;
  height: 20px;
  margin: 0px 5px;
}

.links {
  margin: 0px 2px;
}

表格组：

<div className="form-group">
                <div className="checkbox-wrapper">
                    <Field
                      name="consent"
                      type="checkbox"
                      checked={values.consent}
                      className={
                        "checkbox" +
                        (errors.consent && touched.consent ? " is-invalid" : "")
                      }
                    />
                <label htmlFor="consent" className="checkbox_label_wrapper">
                  You must accept the{" "}
                  <Link className="links" to={"/Terms"}>
                    Terms of Use
                  </Link>{" "}
                  and{" "}
                  <Link className="links" to={"/Privacy"}>
                    Privacy Policy
                  </Link>



            </label>
            </div>