如何在同一行/水平对齐ReactJS的<button>和<input />？

Question

我在容器中有arr1[0][0] = 2.0 arr1[0][1] = 4.0 arr1[0][2] = 6.0 arr1[1][0] = 3.0 arr1[1][1] = 6.0 arr1[1][2] = 9.0 arr1[2][0] = 5.0 arr1[2][1] = 10.0 arr1[2][2] = 15.0 length before = 3 removing 3.0 removing 2.0 length after = 1 arr1[0][0] = 5.0 arr1[0][1] = 10.0 arr1[0][2] = 15.0 和<button/>。如何让它们在容器的同一行和中间垂直对齐（<input/>）？

这是我到目前为止所做的：

<div className="container">

使用className =＆＃34; container＆＃34;：

<div className="container">
   <div>
     <input className="form-control" placeholder='Enter Email'/>
   </div>
   <div>
     <button type="submit" className="btn"> Register </button>
   </div>
</div>

修改

我尝试了您对以下内容的建议，但.container { width: 80%; margin: 0 auto; padding: 0 137px; } 和<input/>仍然在彼此之上：

顶部的黑色部分是导航栏，我希望水平对齐条形内的所有内容，从左到右彼此相邻。

<button/>

Answer 1

您可以使用flex-box。 在反应

中交换class的{​​{1}}属性

修改 要回答您编辑过的问题：

• 将所有内容与Flex容器上的className水平对齐
• 确保align-items: center和input不要通过将它们包装在一个容器元素中而分成不同的行。

＆＃13;

＆＃13;

button

＆＃13;

h1 { color: white; }

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #222;
}

.email-holder {
  margin-left: 10px;
}

＆＃13;

＆＃13;

＆＃13;