jquery – 列表项的水平对齐/对齐？

我有以下情况：

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

由于导航所在的外部容器宽度为800px,因此导航容器的宽度也是800px.

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

解决方法

如果您希望它适用于任意数量的“li”,则此答案适用：

如果你给你的李的显示：块;

li {float:left; display:block; }

然后以下脚本为您完成以下任务：

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");

在jsfiddler：http://jsfiddle.net/PLQFj/14/中查看它