ZBLOG

{ onCancel(); }} > 取消 ...

要将两个按钮在同一行靠右对齐,你可以使用Ant Design的RowCol组件结合Flexbox布局来实现。以下是一个示例代码,展示如何使按钮在一行内靠右对齐:

import { Form, Button, Row, Col } from 'antd';

// ...

<Form.Item wrapperCol={{ span: 24 }}>
    <Row justify="end" align="middle">
        <Col>
            <Button
                type="plain"
                onClick={() => {
                    onCancel();
                }}
            >
                取消
            </Button>
        </Col>
        <Col>
            <Button
                htmlType="submit"
                type="primary"
                style={{ marginLeft: '8px' }} // 添加一些左边距以分隔按钮
            >
                提交
            </Button>
        </Col>
    </Row>
</Form.Item>

关键点:

  • 使用 justify="end": 这会使得所有子元素(即按钮)在水平上靠右对齐。
  • 使用 align="middle": 可选参数,用于确保按钮在垂直方向上居中对齐。
  • 每个按钮放在单独的 Col: 虽然每个按钮是在一行中的,但是将它们分别包裹在不同的 Col 中可以让你更方便地控制样式和间距。
  • 添加左边距: 为“提交”按钮添加了一个左边距,以便它与“取消”按钮之间有一定的空间。

这样设置后,两个按钮将在表单项的一行内并且靠右显示。


内容由零声教学AI助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=19122

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?