通过为 元素设置 display: flex 并配合 gap 属性，可轻松实现标题、邮箱输入框和按钮在同一行水平对齐，无需复杂定位或浮动。

通过为 `

` 元素设置 `display: flex` 并配合 `gap` 属性，可轻松实现标题、邮箱输入框和按钮在同一行水平对齐，无需复杂定位或浮动。

要让

、邮箱 和提交 在同一水平线上整齐排列，关键在于合理使用 CSS Flexbox 布局，而非依赖 inline-flex 于外层容器或手动调整 margin/position。当前结构中，.container 包含

和

两个兄弟元素，而

内部又嵌套了

（含 ）和

。若仅对 .container 设置 inline-flex，

和

会并排，但

内部仍为默认块级流，导致 和

垂直堆叠。

✅ 正确解法是：将 设为弹性容器（display: flex），使其子元素（即 .email div 和

）沿主轴水平排列；同时，为

和

在 .container 中提供一致的垂直对齐方式。

以下是优化后的完整代码方案：

.container {
  display: inline-flex;
  align-items: center; /* 垂直居中对齐 h3 与 form */
  gap: 1rem; /* 可选：控制 h3 与 form 之间的间距 */
}

h3 {
  font-size: 2vw;
  margin: 0; /* 移除默认上下边距，避免干扰对齐 */
  line-height: 1;
}

form {
  display: flex;
  gap: 0.5rem; /* 输入框与按钮间的间距 */
  margin: 0; /* 清除表单默认外边距 */
}

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

button {
  border: 1px solid #CCCCCC;
  border-radius: 20px;
  font-size: 1.25vw;
  padding: 0.5vw 1.5vw;
  transition-duration: 0.4s;
  cursor: pointer;
  color: #CCCCCC;
  background: transparent;
}

⚠️ 注意事项：

• 不要给 设置 text-align: center（它对行内元素无效，且 button 默认已居中）；
• 避免在
  内使用未包裹的

  —— 更推荐直接将 作为 form 的直接子元素，或确保 .email 本身不破坏 flex 流（如未设 display: block 等）；

  若需响应式适配，建议用 rem 或 em 替代 vw 单位，防止小屏下文字过大；

  netlify 属性属于 Netlify 表单功能，不影响布局，但请确保生产环境已正确配置。

  最终效果：

  、邮箱输入框、按钮三者严格水平对齐，视觉节奏清晰，维护性强，且完全符合现代 CSS 布局最佳实践。