skip to Main Content

I’ve got a navbar, and I want to space the links evenly across the bar.
This is my HTML

<nav class="mainAddressBar">
                <ul class='navLinks'>
                    <li class="navItem"><a href="index.html">Home</a></li>
                    <li class="navItem"><a href="about.html">About Us</a></li>
                    <!--<li class="navItem"><a href="portfolio.html">Portfolio</a></li>-->
                    <li class="navItem"><a href="contact.html">Contact</a></li>
                </ul>
            </nav>

CSS:

.navLinks {
    display: flex;
    justify-content: space-between;
    /*padding-left: 10em;*/
}

.navItem {
    flex: 1;
}

.navItem:last-child{
    margin-left: auto;
}

This is the output:
enter image description here

I am wanting the contact button to be all the way to the right.

I have tried splitting the navbar into two sections, with the first two links in one div and the contact link in the second div, and using justify-content:space-around. I’ve always attempted to use

.navItem:last-child{
    margin-left: auto;
}

I have been able to maintain the spacing and move the contact link further right, but not quite where it needs to be.

2

Answers


  1. You can try “text-align: right;” in that last child.

    Login or Signup to reply.
  2. There is flex:1 on .navItem, the .navItem will fill the container, so the last .navItem is already been push to the right.

    You can change text-align or dont set flex:1 on last child.

    .navLinks {
      display: flex;
      justify-content: space-between;
      /*padding-left: 10em;*/
    }
    
    .navItem:not(:last-child) {
      flex: 1;
    }
    
    .navItem:last-child {
      margin-left: auto;
    }
    <nav class="mainAddressBar">
      <ul class='navLinks'>
        <li class="navItem"><a href="index.html">Home</a></li>
        <li class="navItem"><a href="about.html">About Us</a></li>
        <!--<li class="navItem"><a href="portfolio.html">Portfolio</a></li>-->
        <li class="navItem"><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search