Html 并排制作两个表单按钮_Html_Css_Button

Html 并排制作两个表单按钮

html css button

Html 并排制作两个表单按钮,html,css,button,Html,Css,Button,我有两个表单按钮，它们延伸到我的容器。并逐行显示。有没有办法使它并排集中 .submit1{ 背景色：#008CBA；颜色：白色；文本对齐：居中；显示：内联块；字号：18px；边界：无； } .提交2{ 背景色：#BA002D；颜色：白色；文本对齐：居中；显示：内联块；字号：18px；边界：无； } 您想这样做吗： .submit1{ 背景色：#008CBA；颜色：白色；文本对齐：居中；显示：内联块；字号：18px；边界：无； } .提交2{ 背景色：#BA0

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

.submit1{
背景色：#008CBA；
颜色：白色；
文本对齐：居中；
显示：内联块；
字号：18px；
边界：无；
}
.提交2{
背景色：#BA002D；
颜色：白色；
文本对齐：居中；
显示：内联块；
字号：18px；
边界：无；
}

您想这样做吗：

.submit1{
背景色：#008CBA；
颜色：白色；
文本对齐：居中；
显示：内联块；
字号：18px；
边界：无；
}
.提交2{
背景色：#BA002D；
颜色：白色；
文本对齐：居中；
显示：内联块；
字号：18px；
边界：无；
}
.表格1{
显示：内联块；
}
.中心{
文本对齐：居中；
}

将其添加到按钮中

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

使用flexbox，它将为您节省大量工作

.submit1{
背景色：#008CBA；
颜色：白色；
文本对齐：居中；
字号：18px；
边界：无；
}
.提交2{
背景色：#BA002D；
颜色：白色；
文本对齐：居中；
字号：18px；
边界：无；
}
#容器{
显示器：flex；
对齐内容：中心}

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

html:

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

为什么有两种不同的形式？这就是问题的根源。。。此外，您发布的代码不会产生您显示的输出（请使用编辑器工具栏中的图像图标重新发布）。按钮的规则集中已经有

display:inline block

。。尝试了您的代码，效果也很好，谢谢！

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

 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;
}