如何解决 AntD 表单中的文本对齐问题答案

【问题标题】：How to resolve text alignment issue in AntD form如何解决 AntD 表单中的文本对齐问题
【发布时间】：2020-11-14 22:49:17
【问题描述】：

我有一个 AntD 模态，它有一个我正在努力对齐一些文本的表单。这是文本以黄色突出显示的样子。我希望它与我绘制红色框的第一列对齐。

包含“个人信息”文本和申请表字段的代码部分如下所示：

  <Form
    ref={this.formRef}
    {...formItemLayoutWithOutLabel}
    onFinish={onFinish}
    id="myForm"
    validateMessages={validateMessages}
    initialValues={{ applicants: [{ firstName: '' }] }}
  >
    {
      <Form.List name="applicants">
        {(fields, { add, remove }) => {
          return (
            <div>
              <Form.Item {...formItemLayout}}>
                <Row>
                  <Col span={24}>
                    Personal Information
                  </Col>
                </Row>
              </Form.Item>
              {fields.map((field, index) => (
                <Form.Item {...formItemLayout} label={`Applicant #${index + 1}`} key={field.key}>
                  <Row key={field.key} gutter={[0, 8]} justify="start">
                    <Col span={12}>
                      <Row gutter={[4, 4]}>
                        <Col span={7}>
                          <Form.Item name={[field.name, 'firstName']} fieldKey={[field.fieldKey, 'firstName']} rules={rules}>
                            <Input placeholder="First Name" ref={this.inputRef} />
                          </Form.Item>
                        </Col>

我想也许如果我将标签设置为空白，它会在表单项上完成我想要的并且它确实做到了，但是当然，冒号仍然是我不想要的。所以我猜这不是实现这一目标的正确方法，也许还有更好的 CSS 路线可供选择。

我正在寻求有关如何获得所需对齐的帮助。最后，我还想将“雇主信息”与右栏对齐，放在雇主信息上方。

编辑#1

在此处添加此问题的简化代码框。欣赏任何想法！

CodeSandBox

【问题讨论】：

如果您可以使用此方法重现演示，我可以提供帮助：codesandbox.io/s
添加了一个代码框来展示正在发生的事情。

标签： css reactjs antd

【解决方案1】：

Form.Item 可以选择在label 后面显示冒号。你可以去看看here

禁用它会完成你想要的

<Form.Item {...formItemLayout} label=" " colon={false}>
  <Row gutter={[0, 8]} justify="start">
    <Col span={12}>Personal Information</Col>
    <Col span={12}>Employer Information</Col>
  </Row>
</Form.Item>

【讨论】：