如何通过CSS将表单submit按钮移动到email输入框下方

两个input默认是行内块元素，会在同一行排列，按以下步骤修改即可实现需求：

修正HTML结构问题 #

你现有代码存在两个会影响渲染的语法问题：

• <input>是自闭合标签，不需要额外写</input>闭合标签
• 目前<h2>和<form>都写在了</body>标签外部，需要移到</main>和</body>之间
  修正后的表单相关代码：

<h2>Handcrafted, home-made masterpieces</h2>
<form id="form">
  <input id="email" name="email" type="email" placeholder="Enter your email here" required>
  <input id="submit" type="submit" value="Get Started">
</form>

修改CSS样式 #

保留你原有样式的基础上，调整邮箱输入框边距、新增提交按钮样式，让按钮独占一行并居中：

#email{
  width: 50vw;
  margin-left: 25vw;
  margin-bottom: 16px; /* 增加下间距，和按钮拉开距离 */
  padding: 8px;
}
#submit{
  display: block; /* 将按钮转为块级元素，自动独占一行，实现换行效果 */
  width: 120px; /* 按钮宽度可按需调整 */
  margin: 0 auto; /* 左右边距设为auto，实现按钮水平居中 */
  padding: 8px 12px;
  cursor: pointer;
}

如果你不需要按钮居中，只想让它换行靠左侧排列，只需要给#submit加display: block属性即可，不需要设置宽度和margin:0 auto。

内容的提问来源于stack exchange，提问作者Tùng Vương