htmlcsshtml-listsjustify

How do I justify a horizontal list?


I have a horizontal navbar like the following:

<ul id = "Navigation">
    <li><a href = "About.html">About</a></li>
    <li><a href = "Contact.html">Contact</a></li>
    <!-- ... -->
</ul>

I use CSS to remove the bullet points and make it horizontal.

#Navigation li
{
    list-style-type: none;
    display: inline;
}

I'm trying to justify the text so each link is spread out evenly to fill up the entirety of the ul's space. I tried adding text: justify to both the li and ul selectors, but they're still left-aligned.

#Navigation
{
    text-align: justify;
}

#Navigation li
{
    list-style-type: none;
    display: inline;
    text-align: justify;
}

This is strange, because if I use text-align: right, it behaves as expected.

How do I spread out the links evenly?


Solution

  • Modern Approach - CSS3 Flexboxes

    Now that we have CSS3 flexboxes, you no longer need to resort to tricks and workarounds in order to make this work. Fortunately, browser support has come a long way, and most of us can start using flexboxes.

    Just set the parent element's display to flex and then change the justify-content property to either space-between or space-around in order to add space between/around the children flexbox items. Then add additional vendor prefixes for more browser support.

    Using justify-content: space-between - (example here):

    ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .menu {
        display: flex;
        justify-content: space-between;
    }
    <ul class="menu">
        <li>About</li>
        <li>Contact</li>
        <li>Contact Longer Link</li>
        <li>Contact</li>
    </ul>


    Using justify-content: space-around - (example here):

    ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .menu {
        display: flex;
        justify-content: space-around;
    }
    <ul class="menu">
        <li>About</li>
        <li>Contact</li>
        <li>Contact Longer Link</li>
        <li>Contact</li>
    </ul>