Align words Left Right and Center on the same line

Question

I'm trying to make this nav but I don't know how to make all the words fit with one in the center, left and right

<nav class="barBox" target="_blank">
<a href="#" class="bar"><font color="lime"><b>Home</b></font></a> 
<a href="#" class="bar"><font color="lime"><b>Forums</b></font></a> 
<a href="#" class="bar"><font color="lime"><b>Store</b></font></a>
</nav>

that's my code that I'm trying to make all on one line while the home is on the left, forums is in the center, store is on the right. All on the same line.

Answer 1

You could use positioning. This is just one possible solution.

 .barBox { width: 100%; position: relative; text-align: center; } .barBox a { color: #fff; background: #aaa; padding: 5px 10px; display: inline-block; font-weight: bold; text-decoration: none; } .barBox a:first-child { position: absolute; left:0; } .barBox a:last-child { position: absolute; right:0; }

 <nav class="barBox" target="_blank"> <a href="#" class="bar">Home</a> <a href="#" class="bar">Forums</a> <a href="#" class="bar">Store</a> </nav>

Note I removed the font and b tags.... they have been deprecated for years now.

Answer 2

Does this help you at all?

used:

float: left //left
margin: 0 auto; //center
right: 10px //push it to the right but can still see it

A little hacky but gets the job done

https://jsfiddle.net/t20jjjz7/1/