How do I align all items inside a html
element to the right?

Question

I have this div up there which I'm using as a menu bar. I want to align all items inside it towards the right side, but I am unable to do that. Here is the code for it:

$(document).ready(function() {
  $(window).scroll(function() {
      if ($(document).scrollTop() > 20) {
          $("#menubar").css('background', 'rgba(62, 63, 64, 0.88)');
          $("#menubar a").css('color', 'white');

      } else {
          $("#menubar").css('background', '');
          $("#menubar a").css('color', '');
      }
  });
});

#menubar a {
  padding-top: 2vh;
  padding-bottom: 2vh;
  text-decoration: none;
  color: #1A1A1A;
  font-size: 2.5vh;
  font-family: "Input Mono";
  display: block;
  float: left;
  padding-right: 10px;
  padding-left: 10px;
}

#menubar {
  right: 0%;
  position: fixed;
  top: 0;
  z-index: 999999;
  overflow: hidden;
  width: 100%;
}

<div id="menubar">
    <a href="./index.html">Home</a>
    <a href="href">About</a>
    <a href="./index.html">Features</a>
    <a href="./index.html">Download</a>
    <a href="href">Github</a>
</div>

Would really appreciate your help!

score 1 · Accepted Answer · edited Oct 07 '20 at 07:25

Like this ?:

$(document).ready(function() {
  $(window).scroll(function() {
      if ($(document).scrollTop() > 20) {
          $("#menubar").css('background', 'rgba(62, 63, 64, 0.88)');
          $("#menubar a").css('color', 'white');

      } else {
          $("#menubar").css('background', '');
          $("#menubar a").css('color', '');
      }
  });
});

#menubar a {
  padding-top: 2vh;
  padding-bottom: 2vh;
  text-decoration: none;
  color: #1A1A1A;
  font-size: 2.5vh;
  font-family: "Input Mono";
  display: block;
  float: left;
  padding-right: 10px;
  padding-left: 10px;
}

#menubar {
  right: 0%;
  position: fixed;
  top: 0;
  z-index: 999999;
  overflow: hidden;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>  
</head>
<div id="menubar">
  <a href="./index.html">Home</a>
  <a href="link">About</a>
  <a href="./index.html">Features</a>
  <a href="./index.html">Download</a>
  <a href="link">Github</a>
</div>

How do I align all items inside a html element to the right?

1 Answers1

How do I align all items inside a html
element to the right?