skip to Main Content

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


  1. 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:

    .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>
    Login or Signup to reply.
  2. I am not sure about center tag and also </button> at the end of first link. FLEX must deal with the issue

    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>
    Login or Signup to reply.
  3. You can use position:relative and display: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.

    .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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search