如何将按钮置于email输入框旁，实现h3、输入框与按钮水平排列？

当前代码的核心问题是：.container 虽设置了 inline-flex，但内部的 <form> 属于块级元素，且表单内的输入框和按钮默认垂直排列，导致三者无法在同一行对齐。以下是具体解决方案：

修改步骤： #

• 给 <form> 添加 display: flex 和 align-items: center，让表单内的输入框和按钮切换为水平排列并垂直居中
• 给 .container 添加上 align-items: center，确保h3标题与表单整体垂直对齐
• 给元素间添加间距，避免布局拥挤，同时优化输入框和按钮的内边距提升视觉体验

修改后的完整代码： #

CSS代码：

.container {
  display: inline-flex;
  align-items: center; /* 让h3与表单垂直居中对齐 */
  gap: 1vw; /* 统一控制元素间的间距 */
}

h3 {
  font-size: 2vw;
  margin: .5vw;
}

form {
  display: flex;
  align-items: center;
  gap: 0.5vw; /* 输入框与按钮的间距 */
}

.email input {
  padding: 0.5vw 1vw;
  border: thin solid #CCCCCC;
  border-radius: 20px;
  font-size: 1.25vw;
}

button {
  border-style: solid;
  border-color: #CCCCCC;
  border-radius: 20px;
  border-width: thin;
  font-size: 1.25vw;
  padding: 0.5vw 1.5vw; /* 增加内边距优化按钮视觉 */
  transition-duration: 0.4s;
  cursor: pointer;
  color: #CCCCCC;
  text-align: center;
}

HTML代码：

<main>
  <h1>
    XXXXX
  </h1>
  <h2>
    coming soon
  </h2>

  <div class="container">
    <h3>sign up for more</h3>
    <form method="POST" netlify>
      <div class="email">
        <input type="email" name="email" id="email" placeholder="email" required>
      </div>
      <button type="submit" class="sign-up">sign up</button> <!-- 修正class命名，避免空格导致的样式识别问题 -->
    </form>
  </div>
</main>

关键说明： #

1. 利用Flex布局的特性，将容器和表单都设置为flex，快速实现水平排列
2. 使用gap属性替代margin，更便捷地控制元素间的间距
3. 修正按钮的class命名（原空格分隔的sign up会被识别为两个独立类，改为连字符sign-up更规范）

内容的提问来源于stack exchange，提问作者Avery Wilson