如何解决并排制作两个表单按钮
我有两个表单按钮，它们延伸到我的容器中。并逐行显示。有没有办法做到并排集中？
.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>解决方法
你想要这样：
.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>将此添加到您的按钮
#button1,#button2 {
display:inline-block;
/**other codes**/
}
使用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>尝试为表单元素添加样式，如下所示：
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 ，它使定位更容易。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。