Horizontal justification/alignment of list items?

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 clas开发者_JAVA技巧s="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?

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>

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/

.menu {
    text-align: justify;
}
.menu ul,
.menu li {
    display: inline;
}
.menu ul::after {
    display: inline-block;
    width: 100%;
    content: "";
}    

But for cross browser compatibility (IE7), you should replace the ::after by an additional element in the markup:

<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>
        <span></span>
    </div>
</nav>

See demo fiddle.

FIDDLE: http://jsfiddle.net/QR5s3/

*CSS (changed from floating li to inline li)*

#access .menu ul {
    text-align:center;   
}

#access .menu ul li:first-child {
    padding-left:0 !important;
}

#access .menu ul li:last-child {
    padding-right:0 !important;
}

#access .menu ul li {
    display:inline;
    padding:0 35px; /* ADJUST PADDING */
}

How about:

#access .menu ul li 
{     
   float: left; 
   margin-right: 10px
} 

The only reasonable cross-browser non-JavaScript approach would be <table>'s i'm afraid. This is not very elegant, but it does the job. A float-based layout would not be capable of displaying items of variable size correctly. The whole thing should even work in IE 6.

Markup

<table class="nav">
    <tr>
        <td class="item">item</td>
        <td class="separator">&nbsp;</td>
        <td class="item">item</td>
        <td class="separator">&nbsp;</td>
        ...
    </tr>
</table>

The separator needs to contain a  -entity to ensure that it is displayed correctly across all browsers (IE is making trouble here by ignoring empty cells).

Style

.nav, .nav tbody, .nav tr {
    width: 100%;
}
.nav .item {
    /* this forces the item to be as small as possible,
       which forces the separators to take up the
       remaining space */
    width: 1px; 
}

You need to make sure that the content of all items has whitespaces replaced with  's to prevent text from wrapping that would occur due to the 1px width.

The first method I can think of is using a table instead of an unordered list. It would look the way you want by default. Additionally, adding more menu items would be a breeze since the alignment is automatic.

Here's a demonstration of a couple of ways to do this

CSS:

#access
{
    border: 1px solid #DDDDDD;
    height: 50px;
    width: 800px;
}

.menu ul li
{
    float: left;
}

.menu ul {
    margin: 0;
    padding: 0
}

JQUERY:

var li = $('#access ul li').length - 1;
var w = 0;
$('#access ul li').each(function() {
    w = w + $(this).width();
});
var eachPlot = ($('#access').width() - w) / li;
$('#access ul li:gt(0)').each(function() {
    $(this).css({
        'margin-left': parseInt(eachPlot) + 'px'
    });
});