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

Question

我有以下情况:

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

由于导航所在的外部容器大约有 800 像素宽，因此导航容器也有 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？

Answer 1

此方法 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>