我有以下情况：
<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/中查看它
