Question

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

使用以下代码使用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>

Answer 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>

Answer 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>

输入按钮彼此相邻，一个形成一个新页面

2 个答案: