我有以下情况:
<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/中查看它
原文地址:https://www.jb51.cc/jquery/177721.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。