I was trying to put my buttons from top to bottom on my html page in the upper right hand corner. They just all stack up there, the only way that I am able to unstack them is is I do the br tag 3 times between each button. Shouldn’t the top and bottom margin deal with this?
If you run the code snippet you can see that all of the buttons stack together in the top right, I want them to be one on top of the other.
HTML and CSS code:
.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>
3
Answers
For the buttons all stacked up, it is because you have
position: absolute;
in the button styles.For the buttons to align right, you can try wrapping the buttons in a flexbox like so:
I am not sure about
center
tag and also</button>
at the end of first link. FLEX must deal with the issueYou can use
position:relative
anddisplay:block
attributes for.button
class. I wrote it like below now works fine. I hope it works for you. Additionally if you want to align items to the right you can use which i wrote below.right
class attributes in css codes.