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 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/