【Antd踩坑】Antd Form 配合Input.Group时出现Form.Item所占据的高度不对

最新推荐文章于 2022-09-19 20:22:20 发布

似酒龙井

最新推荐文章于 2022-09-19 20:22:20 发布

阅读量2.9k

点赞数

分类专栏： antd 文章标签： javascript 前端 antd form input.group

本文链接：https://blog.csdn.net/qq_43430964/article/details/125536721

版权

antd 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Antd Form 配合Input.Group时出现Form.Item所占据的高度不对，间隔会偏大，如下图红框
在这里插入图片描述
看了下代码，可能是因为Input.Group导致有额外的margin-bottom

		</Form.Item>
            <Form.Item label="Y主轴取值范围">
              <Input.Group compact>
                <Form.Item name="YMainAxisRangeMin">
                  <Input
                    addonBefore=""
                    style={{ width: 100, textAlign: 'center' }}
                    placeholder="Minimum"
                  />
                </Form.Item>
                <Input
                  className="site-input-split"
                  style={{
                    width: 30,
                    borderLeft: 0,
                    borderRight: 0,
                    pointerEvents: 'none',
                  }}
                  placeholder="~"
                  disabled
                />
                <Form.Item name="YMainAxisRangeMax">
                  <Input
                    className="site-input-right"
                    style={{
                      width: 100,
                      textAlign: 'center',
                    }}
                    placeholder="Maximum"
                  />
                </Form.Item>
              </Input.Group>
            </Form.Item>

          <Form.Item label="Y主轴步长" name="YMainAxisStep">
            <Input
              style={{ width: 100, textAlign: 'center' }}
              placeholder="Y主轴步长"
            />
          </Form.Item>

想了个解决方法：在Form.Item外再嵌套一个div并限制其高度，即可解决「我知道治标不治本，求求不喜勿喷」
在这里插入图片描述

		</Form.Item>
          <div style={{ height: '56px' }}>
            <Form.Item label="Y主轴取值范围">
              <Input.Group compact>
                <Form.Item name="YMainAxisRangeMin">
                  <Input
                    addonBefore=""
                    style={{ width: 100, textAlign: 'center' }}
                    placeholder="Minimum"
                  />
                </Form.Item>
                <Input
                  className="site-input-split"
                  style={{
                    width: 30,
                    borderLeft: 0,
                    borderRight: 0,
                    pointerEvents: 'none',
                  }}
                  placeholder="~"
                  disabled
                />
                <Form.Item name="YMainAxisRangeMax">
                  <Input
                    className="site-input-right"
                    style={{
                      width: 100,
                      textAlign: 'center',
                    }}
                    placeholder="Maximum"
                  />
                </Form.Item>
              </Input.Group>
            </Form.Item>
          </div>

          <Form.Item label="Y主轴步长" name="YMainAxisStep">
            <Input
              style={{ width: 100, textAlign: 'center' }}
              placeholder="Y主轴步长"
            />
          </Form.Item>