输入按钮彼此相邻，一个表单一个新页面答案

【问题标题】：input buttons next to each other, one form one new page输入按钮彼此相邻，一个表单一个新页面
【发布时间】：2018-01-06 00:40:16
【问题描述】：

我想要两个按钮，一个提交数据，另一个返回到其他页面，居中并彼此相邻。我可以居中，但不能在同一条线上。

以下代码使用 2 种形式，这两个功能都可以正常工作，但一个按钮位于另一个下方。

<body>
   <div id='main_body'>    
   <form action='' method="post">   
        <input type="text" name="firstname"><br>
        <input id ='button' type='submit' name='submit' value='Update' >
    </form>   
    <form>   
        <form action="index.php" method="post">
        <input id ='button' type="submit" value="Home" />
    </form>   
    </div>            
</body>

【问题讨论】：

你能展示你尝试了什么吗？
您要添加垂直居中还是水平居中？
感谢 flex 选项。我以前没用过。我真的很想把 2 个输入按钮放在自己的容器中，独立于表单容器。
标题和链接在自己的 div 中。主 div 包含输入字段。所以我需要在不破坏表格格式的情况下将 Home 按钮放在同一个 div 中。
@marsheng 能否请您发布图片中所有元素的 HTML 代码，我已经为您提供了相应的 CSS？顺便说一句，这是否允许更改 HTML？

标签： css forms button center

【解决方案1】：

看到这个：希望对您有所帮助。

main_body {
  position: relative;
}

#bt1 {
  position: absolute;
  display: inline;
}

#bt2 {
  position: absolute;
  margin-left: 60px;
  margin-top: 21px;
}

<div id='main_body'>
  <div id="bt1">
    <form action='' method="post">
      <input type="text" name="firstname"><br>
      <input id='button' type='submit' name='submit' value='Update'>
    </form>
  </div>

  <div id="bt2">
    <form action="index.php" method="post">
      <input id='button' type="submit" value="Home" />
    </form>
  </div>
</div>

【讨论】：

【解决方案2】：

您可以使用 flexbox 来实现所需的布局。如果您希望项目之间有一些空间，还可以添加边距。演示：

#main_body,
#main_body > * {
  display: flex;
  /* align-items in one column */
  flex-direction: column;
  /* add horizontal centering */
  align-items: center;
}

#main_body {
  /* add vertical centering */
  justify-content: center;
}

/* optional styles, just add more offset for second form */
#main_body > form + form {
  margin-top: 20px;
}

<div id='main_body'>
  <form action='' method="post">
    <input type="text" name="firstname"><br>
    <input id='button' type='submit' name='submit' value='Update'>
  </form>
  <form action="index.php" method="post">
    <input id='button' type="submit" value="Home" />
  </form>
</div>

【讨论】：

我忘记添加 JPG。该示例是我的页面的简化版本。按钮需要出现在表单的底部。
@marsheng 更新了我的答案以满足您的需求。