我的按钮上的边距不起作用，它们只是在右上角堆叠在一起

Question

我试图把我的按钮从上到下在我的html页面右上角。它们都堆叠在一起，我唯一能解开它们的方法就是在每个按钮之间做3次br标签。上下边距不应该解决这个问题吗?如果你运行代码片段，你可以看到所有的按钮都在右上角堆叠在一起，我想让它们一个在另一个的上面。

HTML和CSS代码:

.button {
font-family: Trebuchet MS;
font-size: 20px;
color: #000;
border: none;
text-align: center;
background-color: transparent;
padding: 7px;
margin: 20px;
border: 2px solid black;
border-radius: 15px;
padding: 8px;
right: 10px;
position: absolute;
}

<center>
<a href="dinosaur.html"><button class="button">Dinosaur Game</button></a></button>
<a href="slope.html"><button class="button">Slope</button></a>
<a href="tunnel-rush.html"><button class="button">Tunnel Rush</button></a>
<a href="2048.html"><button class="button">2048</button></a>
<a href="ratatouille.html"><button class="button">Ratatouille</button></a>
</center>

Answer 1

对于所有堆叠的按钮，这是因为你在按钮样式中有position: absolute;。

要使按钮向右对齐，您可以尝试将按钮包装在flexbox中，如下所示:

.button {
font-family: Trebuchet MS;
font-size: 20px;
color: #000;
border: none;
text-align: center;
background-color: transparent;
padding: 7px;
margin: 20px;
border: 2px solid black;
border-radius: 15px;
padding: 8px;
right: 10px;
}
.container {
display: flex;
flex-direction: column;
align-items: flex-end;
}

<div class="container">
<a href="dinosaur.html"><button class="button">Dinosaur Game</button></a></button>
<a href="slope.html"><button class="button">Slope</button></a>
<a href="tunnel-rush.html"><button class="button">Tunnel Rush</button></a>
<a href="2048.html"><button class="button">2048</button></a>
<a href="ratatouille.html"><button class="button">Ratatouille</button></a>
</div>

Answer 2

我不确定center标签和</button>在第一个链接的末尾。FLEX必须处理这个问题

main {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-end;
}
.button {
font-family: Trebuchet MS;
font-size: 20px;
color: #000;
border: none;
text-align: center;
background-color: transparent;
padding: 7px;
margin: 20px;
border: 2px solid black;
border-radius: 15px;
padding: 8px;
right: 10px;
/*position: absolute;*/
}

<main>
<a href="dinosaur.html"><button class="button">Dinosaur Game</button></a>
<a href="slope.html"><button class="button">Slope</button></a>
<a href="tunnel-rush.html"><button class="button">Tunnel Rush</button></a>
<a href="2048.html"><button class="button">2048</button></a>
<a href="ratatouille.html"><button class="button">Ratatouille</button></a>
</main>

Answer 3

您可以为.button类使用position:relative和display:block属性。我把它写在下面，现在运行良好。我希望它对你有用。另外，如果你想把项目向右对齐，你可以使用我在css代码中.right类属性下面写的。

.button {
font-family: Trebuchet MS;
font-size: 20px;
color: #000;
border: none;
background-color: transparent;
padding: 7px;
margin: 20px;
border: 2px solid black;
border-radius: 15px;
padding: 8px;
position: relative;
display:block;
}
.right {
display:flex;
align-items:flex-end;
flex-direction: column;
}

<div class="right">
<a href="dinosaur.html"><button class="button">Dinosaur Game</button></a></button>
<a href="slope.html"><button class="button">Slope</button></a>
<a href="tunnel-rush.html"><button class="button">Tunnel Rush</button></a>
<a href="2048.html"><button class="button">2048</button></a>
<a href="ratatouille.html"><button class="button">Ratatouille</button></a>
</p>