Horizontal justification/alignment of list items?

Question

I have the following situation:

<nav id="access" role="navigation">
    <div class="menu">
        <ul>
            <li class="page_item"><a href="#pricing" title="Pricing">Pricing</a></li>
            <li class="page_item"><a href="#booking" title="Booking">Booking</a></li>
            <li class="page_item"><a href="#contact" title="Contact">Contact</a></li>
            <li class="page_item"><a href="#map" title="Map">Map</a></li>
        </ul>
    </div>
</nav>

Since the outer container where the nav sits in is like 800px wide, the nav container is also 800px wide.

#access .menu ul li {
    float: left;
}

I'm floating all menu elements left so the align side by side. I wonder how I can create equal space between all those list items, like this:

____________________________________ <- this is what I have now
item  item  item  item  item

____________________________________ <- this is what I want
item    item    item    item    item

Any idea how to solve this? Either with pure CSS or jQuery?

Answer 1

This Method WORK 100%!

CSS:

.menu { position:relative; text-align:justify; text-align-last:justify; border:1px solid silver; height:2.2em; min-width:800px; }
.menu li { display:inline-block; background:silver; padding:.5em 1em; cursor:pointer; text-align:center; }
.menu li:hover { background:black; color:white; }
.menu:after { content:""; display:inline-block; width:100%; height:0; overflow:hidden; }

HTML:

<ul class="menu">
    <li>About</li>
    <li>Company</li>
    <li>Products</li>
    <li>Menu item</li>
</ul>

Answer 2

This answer applies if you want it to work with any number of "li"s:

if you give your li's display:block;

li {float:left; display:block; }

then the following script does the job for your:

var first = $("li:first");
var allOther = $("li").not(":first, :last");
var last = $("li:last");

var remainingWidth = $(".menu").width() - first.width() - last.width();
allOther.width(remainingWidth / allOther.length).css("text-align", "center"); 

have a look at it in jsFiddler: http://jsfiddle.net/PLQFj/14/