我目前正在尝试将两个按钮居中显示，以便第一个按钮向左浮动，而另一个按钮水平显示在第一个按钮的另一侧，同时所有这些都以页面为中心。
但出于某种原因，我被卡住了，可能遗漏了一些非常明显的东西，但无论出于何种原因，我都无法弄清楚。
这就是我所拥有的:
body {
background: url("background/background.jpg");
}
.top {
color: black;
font-family: "Lemon";
}
.top-rectangle {
width: 100%;
background-color: black;
height: 60px;
}
.main-buttons {
display: inline;
position: absolute;
margin: 0 auto;
width: 100%;
text-align: center;
float: left;
}
.top-main {
font-family: "american-font";
color: white;
font-size: 32pt;
text-align: center;
width: 800px;
margin: auto;
letter-spacing: 3px;
}
.top-plans {
font-family: "max-impact";
color: white;
font-size: 15pt;
text-align: center;
width: 500px;
margin: auto;
}
.btnop {
background: #298371;
color: white;
height: 104px;
width: 308px;
font-size: 1.2em;
border-radius: 5px;
border-width: 0px;
cursor: pointer;
}
.btnop:hover {
background-color: #204e45;
}
#downloadbutton {}
#purchasebutton {}<body>
<div class="top">
<h1>DELUXEVIEWBOT</h1>
</div>
<div class="top-rectangle">
</div>
<div class="top-main">
<p>Deluxe Viewbot is able to increase viewership by more than 1000% your very first time using our service!</p>
</div>
<div class="top-plans">
<p>Plans start at $15 a week and $40 a month!</p>
</div>
<div class="main-buttons">
<form method="get" action="downloads/list.php">
<button type="submit" class="btnop" style="text-align: center" id="downloadbutton">Download</button>
</form>
<form method="get" action="purchase">
<button type="button" class="btnop" style="text-align: center" id="purchasebutton">Purchase</button>
</form>
</div>
</body>最佳答案
<span style="display: inline;">
<form method="get" action="downloads/list.php">
<button type="submit" class="btnop" style="text-align: center"
id="downloadbutton">Download</button>
</form>
<form method="get" action="purchase">
<button type="button" class="btnop" style="text-align: center"
id="purchasebutton">Purchase</button>
</form>
</span>
关于html - 如何让两个按钮彼此相邻，同时让它们保持水平居中于网页？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51228850/