How do I justify a horizontal list?

css, html, html-lists, justify

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>

Problem

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?

Original source

Related problems