{ text-align: justify; } on horizontal menu. Remove the added space on the right

Question

The top shows Firefox/IE. The bottom is Google Chrome. Notice the tiny space on the right?

<ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
</ul>

ul {
    padding: 0;
    margin: 0;
    width: 300px; 
    list-style-type: none;
    text-align: justify;
    background-color: #00f;
}

ul:after {
    content: '';
    display: inline-block;
    width: 100%;
}

li {
    display: inline-block;
}

a {
    color: #fff;
}

http://jsfiddle.net/EtU9j/

Where is that tiny space coming from? Why doesn't it justify flush to the edge?

I had something like this a while ago, near the end of this answer: http://stackoverflow.com/questions/6865194/fluid-width-with-equally-spaced-divs/6880421#6880421 — thirtydot, Sep 05 '13 at 14:01

score 5 · Accepted Answer · answered Sep 05 '13 at 13:54

It´s the whitespace between the last </li> and </ul>. It´s approximately 4px wide with normal fontsize.

this:

<ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li></ul>

or this:

<ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li><!--
--></ul>

will fix it.

{ text-align: justify; } on horizontal menu. Remove the added space on the right

1 Answers1