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

Question

我在一个容器中有<button/> 和<input/>。如何让它们在同一行和容器中间垂直对齐 (<div className="container">)？

这是我目前所拥有的：

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

使用 className="container"：

.container {
  width: 80%;
  margin: 0 auto;
  padding: 0 137px;
}

编辑

我尝试了您的以下建议，但 <input/> 和 <button/> 仍然相互重叠：

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

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

Answer 1

您可以为此使用 flex-box。 将 class 属性替换为 react 中的 className

编辑： 要回答您编辑的问题：

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

h1 { color: white; }

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

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

<div class="container">
  <h1>TESTING</h1>
  <div class="email-holder">
    <input class="form-control" placeholder='Enter Email'/>
    <button type="submit" class="btn"> Register </button>
  <div/>  
</div>