How do I justify a horizontal list?


Tags: html,css,html-lists,justify

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?



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>


    CSS Howto..

    How to make image scale as per browser window?

    Getting a resolution error on Chrome and Firefox for C9 app. Not sure how to resolve

    How to use :before for the third
  • element?
  • How to “reset” a DOM subtree's CSS style?

    How can I make an svg scale with its parent container?

    How to add delay in css hover on a div that was displayed none?

    How to Show Menu after full size window in responsive Design

    Can't figure out how to make a box with multiple images with CSS/HTML

    How to say that you need to turn your mobile phone in javascript/css? [closed]

    How to add a mailto to a sentence without extra spacing?

    How to get rid of the left and top margins in css when using html2pdf

    How to theme elgg with HTML and CSS only? [closed]

    How get device resolution for loading sharp images but size fonts/divs properly with viewport width=device-width?

    How to add Video from project directory in the background of Div

    How to override the css using the JQuery

    How to use css with jsp's

    how to write this code as link click animation

    How to use absolute positioning without overlap effect

    how to make textarea looks like input[text] on form invalid

    How do I set a different background to current tab?

    CSS: How to produce rounded boxed list

    Twitter Bootstrap + Rails, how do you integrate and modify it?

    How to change image css after rotating it in JS?

    How can I toggle between multiple .css with jquery?

    How come my divs are jumping around during a transition?

    How do I get the ID of a JQuery item mid-function?

    How can I create button using pure CSS which involves linear gradients and background color

    How to add CSS to ASP.NET site with WebOptimization and Bundling

    How to change the background colour of a QWidget inside QStackedWidget using css?

    How to style 2 vertical jQuery UI Slider handles?