Navigation bar items from left end to right end

1

hi ,
i want my links to start from very left end and ends at very right. i gave my navbar width of 100% and to list , width of 20% for five links but this is not working, anyone help. that would be great.

css is----


nav{
background-color:black;
position:fixed;
width:100%;
}


nav>ul>li{
float:left;
height:40px;
line-height:40px;
width:20%;
}
2

Try to use flexbox and justify content with space-between in your nav > ul tag.

nav > ul{
      display: flex;
      justify-content: space-between;
    }

nav > ul > li {
     height: 40px;
     width: 100%;
}
3

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

4

hi,
thanks for help but still my list items starts from very left and ends someway before right end please see the image for reference.

Untitled
Untitled1366×768 278 KB

5

Try the flexbox way above but with

justify-content: space-between;

6

Here’s an example code:
CodePen - Distribute items from VERY LEFT to VERY RIGHT

Hope it helps

7

try:


nav > ul {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}
8

Yes ! its working, thanks for the help

9

Yeah :slight_smile: please mark the answer that helped. Cheers.