将输入文本与提交按钮放在同一行

Question

我正在写一个搜索框和搜索提交按钮，我尝试了几种方法使按钮和文本框在同一行，但不起作用。这是我的代码。

return (
<Form onSubmit={submitHandler} inline>
<Form.Control
type='text'
name='q'
onChange={(e) => setKeyword(e.target.value)}
placeholder='Serach product'
className='mr-sm-2 ml-sm-5'
></Form.Control>
<Button type='submit' variant='btn btn-success' className='p-2'>
search
</Button>
</Form>
)

我期望的是

但是我有

Reactjs版本是^17.0.1在我的包。但是当我在cmd中使用npm info react时，它显示我react@18.1.0

感谢甘地先生的回答https://stackoverflow.com/a/72385731/19202374

Answer 1

在css中更改输入和/或按钮为display: inline或者你可以把display flex放在输入和按钮的父容器上。

Answer 2

在div中包装表单元素，并给出className(例如:flex-container)。

return (
<Form onSubmit={submitHandler} inline>
<div className="flex-container">
<Form.Control
type='text'
name='q'
onChange={(e) => setKeyword(e.target.value)}
placeholder='Serach product'
className='mr-sm-2 ml-sm-5'
></Form.Control>
<Button type='submit' variant='btn btn-success' className='p-2'>
search
</Button>
</div>
</Form>
)

之后添加

.flex-container {
display: flex;
}