Question

Imagine I have a navigation bar in my page header, with a number of links. I’d like the links to spread out horizontally to fill the parent ; is there a way to do this using CSS which doesn’t rely on me hard-coding based on the number of links? e.g if I add or remove a link I’d like it to still work.

I tried:

<div class="navBar">
    <a class="navBtn" href="#" >Home</a>
    <a class="navBtn" href="#" >Services</a>
    <a class="navBtn" href="#" >About us</a>
    <a class="navBtn" href="#" >Blog</a>
    <a class="navBtn" href="#" >Contact</a>
</div>

div.navBar
{
    text-align:justify;
}
a.navBtn
{
    font-style:italic;
}

But this just left-aligns the text. I know I could use a table but just to show I can, I’m trying to do it ‘properly’. Or, is this a case where a table is ‘proper’?

Answer 1

Text-align: justified;