如何在表单域中水平对齐项目？

Question

我在 table 下方有一个样本表格。像下面一样

我想将表单字段拉伸为与 table 相同的长度，并且我想水平对齐表单项。

我的css是：

.buttonFooter {
    background-color: gray;
    align-items: center;
    flex-direction: row;
    display: inline-block;
}

代码是：

<Card className='buttonFooter'>
                <Form className='buttonFooter'>
                    <input type="text" class="form-control" placeholder="First Name" value={firstName}></input>
                    <input type="text" class="form-control" placeholder="Last Name" value={lastName}></input>
                    <Button>Add New Customer</Button>
                </Form>
            </Card>

如果我删除表单标签并只对卡片使用 css.class 那么它可以工作（水平对齐）但是我需要使用表单来获取输入框的值并将其发送到带有按钮的方法点击。我怎样才能将它们水平对齐并放大到与 table 相同的大小？

Answer 1

您可以使用以下方法在 css 中设置宽度：

width: x;（x 是您 table 的宽度）

我还没有测试过，但你可以尝试将 display 设置为 flex 或 inline-flex 而不是 inline-block

如何在表单域中水平对齐项目？

How to align items horizontal in form field?

html

javascript

css

flexbox

reactjs