如何使两个按钮彼此相邻，同时使它们保持水平居中于网页？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使两个按钮彼此相邻，同时使它们保持水平居中于网页？相关的知识，希望对你有一定的参考价值。
我正在尝试居中并显示内联两个按钮，以便第一个按钮向左浮动，而另一个按钮在第一个按钮的另一侧水平显示，而所有这些按钮都以页面为中心。
但由于某种原因，我陷入了困境，可能会遗漏一些非常明显的东西，我无论出于何种原因都无法弄明白。
所以这就是我所拥有的：
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>
另一答案
在display: flex;和display: inline;上使用.main-buttons而不是justify-content: center;来固定按钮。
body {
background: url("background/background.jpg");
}
.top {
color: black;
font-family: "Lemon";
}
.top-rectangle {
width: 100%;
background-color: black;
height: 60px;
}
.main-buttons {
display: flex;
position: absolute;
justify-content: center;
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>另一答案
你只需要添加这个CSS
.main-buttons form {
display: inline;
}
另一答案
另外看看这个link，有关于flexbox的所有你需要知道的。
.main-buttons{
display: flex;
flex-direction: row;
justify-content: center;
}
以上是关于如何使两个按钮彼此相邻，同时使它们保持水平居中于网页？的主要内容，如果未能解决你的问题，请参考以下文章