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

How can I design a navigation bar where one group of items are aligned left and another group aligned right with CSS Flex? – Html

The Code A is from the article.

The Image A is the result of Code A.

I hope to desgin a UI just like Image B, the two labels on the left of the bar, and the two labels on the right of the bar.

But Code B can’t get the result, how can I do?

Code A

<nav>
  <ul>
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3 is longer</a></li>
    <li class="push-right"><a href="#">Page 4</a></li>
  </ul>
</nav>

nav ul {
  display: flex;
  margin: 0 -10px;
}

nav li {
  margin: 0 10px;
}

.push-right {
  margin-left: auto;
}

Code B

<nav>
  <ul>
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li class="push-right"><a href="#">Page 3 is longer</a></li>
    <li class="push-right"><a href="#">Page 4</a></li>
  </ul>
</nav>

//The same

Image A

enter image description here

Image B

enter image description here

Added Content

Thanks! Maybe the Code C is good way.

Code C

<nav>
  <ul>
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>

    <li class="push-right"><a href="#">Page 3 is longer</a></li>
    <li ><a href="#">Page 4</a></li>
  </ul>
</nav>

nav ul {
  display: flex;
  margin: 0 -10px;
}

nav li {
  margin: 0 10px;
}

.push-right {
  margin-left: auto;
}
Tags:

2

Answers


  1. 0 
    nav > ul {
  display: flex;
  justify-content: space-between;
  padding: 0;
}

nav > ul li {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid blue;
}
    <nav>
  <ul>
    <div>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
    </div>
    <div>
      <li><a href="#">Page 3 is longer</a></li>
      <li><a href="#">Page 4</a></li>
    </div>
  </ul>
</nav>
    Login or Signup to reply.
  2. 0

    Put the "push-right" class on the third item, not the fourth. It then pushes both to the right.

    nav {
  display: flex;
}

a {
  margin: 0 10px;
}

.push-right {
  margin-left: auto;
}
    <nav>
  <a href="#">Page 1</a>
  <a href="#">Page 2</a>
  <a class="push-right" href="#">Page 3 is longer</a>
  <a href="#">Page 4</a>
</nav>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search