Javascript ReactJS：如何对齐表单<；字段>'；s<；输入>；及<；按钮>；及<；h1>；在a<；部门>；？

我有

和

在一个容器内。如何使它们在同一行、彼此相邻、容器垂直中间对齐？

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

顶部黑色部分是导航条，我想并排对齐它们，从左到右依次排列，并在导航栏中间垂直对齐：

请查看底部的“编辑”以获取更新的代码

       import { Field, reduxForm } from 'redux-form';

       const form = reduxForm({
         form: 'register'
       });

       ...

  <div id="wrapper">
    <header>
       <div className="container">
        <h1>
          TESTING
        </h1>
        <form>
            <Field
              name="email"
              className="form-control"
              component={
                  <div>
                    <input
                      className="form-control"
                      id="input-field"
                      placeholder='Enter Email'
                    />
                 </div>
              }
              type="text"
            />
            <button
              type="submit"
              className="btn"
            >
              Register
            </button>
          </form>
        </div>
    </header>
  </div>

编辑

决定去掉表单，但CSS保持不变。我如何调整以下内容以实现我最初想要的（希望h1位于左侧，文本字段+按钮位于右侧

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

测试
登记

编辑

这就是使用

flex

属性执行此操作的方法

另外，确保将HTML中的所有

类名

替换为

类

。确保根据您的喜好设置

输入

和

按钮的样式。
.container{
显示器：flex；
}
h1，
.btn，
#输入字段{
弹性：1；
}

测试
登记
编辑

这就是使用
flex
属性执行此操作的方法

另外，确保将HTML中的所有
类名
替换为
类
。确保根据您的喜好设置
输入
和
按钮的样式。
.container{
显示器：flex；
}
h1，
.btn，
#输入字段{
弹性：1；
}

测试
登记
对不起，在我接受答案之前，你能用我提供的代码展示一个工作示例吗？因为我以前尝试过类似的方法，但在实际操作中没有起作用。谢谢，我看到了，但我的意思是测试
。但就像任何典型的导航栏一样，我希望h1位于左侧，文本字段带有but在右边，h1和文本字段/按钮之间留有空格。请检查是否看到我的最后一条评论。请让我知道。请让我知道，这样我就接受答案并投票。我实际上用编辑和取出表单更新了原始帖子，因为它看起来太粗糙，无法对齐。我如何显示：flex对齐新更新用我最初希望的代码编辑代码？我现在查看了编辑，请检查修改后的代码。抱歉，在我接受答案之前，你能用我提供的代码演示一个工作示例吗？因为我以前尝试过类似的方法，但在实际操作中没有起作用。谢谢你看到了，但我的意思是测试
。但就像任何其他方法一样典型的导航栏，我希望h1在左边，文本字段和按钮在右边，h1和文本字段/按钮之间的空格只是检查一下你是否看到了我最后的评论。请让我知道。请让我知道，所以我去接受答案并投票。我实际上用编辑更新了原始帖子并去掉了Form的原因是它看起来太粗糙，无法将它们对齐。我如何显示：flex将新更新的代码与我最初希望的对齐？我现在查看了编辑，请检查修改后的代码。
  <div id="wrapper">
    <header>
       <div className="container">
          <h1>
            TESTING
          </h1>
          <input
            className="form-control"
            id="input-field"
            placeholder='Enter Email'
          />
          <button
            type="submit"
            className="btn"
          >
            Register
          </button>
      </div>
    </header>
  </div>