Question 44721 in Html Question posted in
Some basic documentation can be found here.

How to float all the list items of navbar to right? – Html

I want to put all the elements to right. How can I do it?Like this
Here is my navbar
I want all the items in ul to be at left of navbar as like in the figure.

I am expecting the list items to right or left how can I do it.
the float is not working for some reason am I making some mistakes or anything someone help me.

nav {
  padding: 40px 50px;
  background-color: black;
}

ul {
  list-style-type: none;
  padding: 0vh 15vh;
}

li {
  color: white;
  text-align: center;
}

@media screen and (min-width:768px) {
  nav {
    padding: 20px 20px;
    height: 30px;
  }
  ul {
    display: flex;
    flex-direction: row;
  }
  li {
    padding: 0px 20px;
    display: inline;
    float: left;
  }
}

* {
  font-family: Arial, Helvetica, sans-serif;
}
<nav class="navbar">
  <ul>
    <li>About</li>
    <li>Courses</li>
    <li>Forum</li>
    <li>Learning Paths</li>
    <li>Contact</li>
  </ul>
</nav>
Tags:

3

Answers


  1. 0

    Set justify-content: flex-end on the list:

    nav {
  padding: 40px 50px;
  background-color: black;
}

ul {
  list-style-type: none;
  padding: 0vh 15vh;
}

li {
  color: white;
  text-align: center;
}

@media screen and (min-width:768px) {
  nav {
    padding: 20px 20px;
    height: 30px;
  }
  ul {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  }
  li {
    padding: 0px 20px;
    display: inline;
    float: left;
  }
}

* {
  font-family: Arial, Helvetica, sans-serif;
}
    <nav class="navbar">
  <ul>
    <li>About</li>
    <li>Courses</li>
    <li>Forum</li>
    <li>Learning Paths</li>
    <li>Contact</li>
  </ul>
</nav>
    Login or Signup to reply.
  2. 0

    To move all the list items to the right, you can add the CSS property justify-content: flex-end; to the ul element. This will align all the items to the right of the navbar. Here’s the updated CSS:

     nav{
   padding: 40px 50px;
   background-color: black;
 }
 ul{
   list-style-type:none;
   padding: 0vh 15vh;
   display: flex;
   justify-content: flex-end;
 }

 li{
   color: white;
   text-align: center;
   padding: 0px 20px ;
 }

 @media screen and (min-width:768px) {
   nav{
      padding: 20px 20px;
      height: 30px;
    }
  }
    <nav class="navbar">
  <ul>
    <li>About</li>
    <li>Courses</li>
    <li>Forum</li>
    <li>Learning Paths</li>
    <li>Contact</li>
  </ul>
</nav>
    Login or Signup to reply.
  3. 0 
    ul {
        display: flex;
        justify-content: flex-end;
        align-items: center;
   }

    I think this is what u want to do, u doesn’t need to use float( btw u cant use float when using dipslay:flex)
    Without padding items will be on flex end as in the screenshot.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search