Горизонтальное выравнивание / выравнивание элементов списка?

У меня следующая ситуация :

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

Поскольку внешний контейнер, в котором находится навигация, равен 8 00 пикселей в ширину, навигационный контейнер также имеет ширину 800 пикселей.

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

Я перемещаю все элементы меню влево, чтобы выровнять их бок о бок. Интересно, как я могу создать равное пространство между всеми этими элементами списка, например:

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

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

Есть идеи, как это решить? Либо с чистым CSS, либо с jQuery?