并排制作两个表单按钮[重复]答案

【问题标题】：Make two Form buttons side-by-side [duplicate]并排制作两个表单按钮[重复]
【发布时间】：2021-04-27 07:02:05
【问题描述】：

我有两个延伸到我的容器的表单按钮。并逐行显示。有没有办法做到并排集中？

.submit1 {
  background-color: #008CBA;
  color: white;
  text-align: center;
  display: inline-block;
  font-size: 18px;
  border: none;
}

.submit2 {
  background-color: #BA002D;
  color: white;
  text-align: center;
  display: inline-block;
  font-size: 18px;
  border: none;
}

<html>

<body>
  <form action="listingsPage.php" method="post">
    <input type="submit" value="Express Interest" class="submit1">
  </form>

  <form action="listingsPage.php" method="post">
    <input type="submit" value="Back to Listings" class="submit2">
  </form>
</body>

</html>

输出图片：https://ibb.co/rctwhTH

【问题讨论】：

为什么会有两个不同的表格？这就是导致问题的原因......此外，您发布的代码不会产生您显示的输出（请使用编辑器工具栏中的图像图标重新发布）。

标签： html css button

【解决方案1】：

你想要这样吗：

.submit1 {
    background-color: #008CBA;
    color: white;
    text-align: center;
    display: inline-block;
    font-size: 18px;
    border: none;
}
.submit2 {
    background-color: #BA002D;
    color: white;
    text-align: center;
    display: inline-block;
    font-size: 18px;
    border: none;
}

.form1 {
  display:inline-block;
}
.center {
  text-align:center;
}

 <body>
   <div class="center">
     <form class="form1" action ="listingsPage.php" method="post">
        <input type="submit" value="Express Interest" class="submit1">
    </form>
    
    <form class="form1" action ="listingsPage.php" method="post">
        <input type="submit" value="Back to Listings" class="submit2">
    </form>
   </div>
  </body>

【讨论】：

【解决方案2】：

将此添加到您的按钮

#button1 , #button2 {
display:inline-block;
/**other codes**/
}

【讨论】：

按钮的规则集中已经有display: inline-block...

【解决方案3】：

使用 flexbox，它会为你节省很多工作

.submit1 {
  background-color: #008CBA;
  color: white;
  text-align: center;
  
  font-size: 18px;
  border: none;
}

.submit2 {
  background-color: #BA002D;
  color: white;
  text-align: center;
  
  font-size: 18px;
  border: none;
}

#container{
display:flex;
justify-content:center}

<html>

<body>
<div id='container'>
  <form action="listingsPage.php" method="post">
    <input type="submit" value="Express Interest" class="submit1">
  </form>

  <form action="listingsPage.php" method="post">
    <input type="submit" value="Back to Listings" class="submit2">
  </form>
</div>
</body>

</html>

【讨论】：

【解决方案4】：

尝试为表单元素添加样式，如下所示：

html:

<body>
  <form action="listingsPage.php" method="post" class="form1">
    <input type="submit" value="Express Interest" class="submit1">
  </form>

  <form action="listingsPage.php" method="post" class="form1">
    <input type="submit" value="Back to Listings" class="submit2">
  </form>
</body>

</html>

css：

 submit1 {
  background-color: #008CBA;
  color: white;
  text-align: center;
  display: inline;
  font-size: 18px;
  border: none;
}

.submit2 {
  background-color: #BA002D;
  color: white;
  text-align: center;
  display: inline;
  font-size: 18px;
  border: none;
}

.form1{
  display:inline;
}

在其他情况下，我建议使用 flexbox，它使定位更加容易。

【讨论】：

试过你的，它也有效，谢谢！