Search code examples
cssmenujustify

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

justified text

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?

Solution

  • 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.