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>

带有Formik的嵌入式复选框标签

2 个答案: