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.
>Solution :
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>