使用jQuery自我调整导航菜单的最简洁方法

Question

我有这个菜单,我希望菜单项自动具有相同的大小,具体取决于有多少菜单项和nav宽度.

但是我很难以尽可能干净的方式完成这项工作.

菜单(JsFiddle)

这就是我构建菜单的方式

<ul>
   <li><a href="#">Item 1</a></li>
   <li><a href="#">Item 2</a>
     <ul>
       <li><a href="#">Item 1</a></li>
     </ul>
   </li>
   <li><a href="#">Item 3</a></li>
   <li><a href="#">Item 4</a></li>
</ul>

Answer 1

如果 jQuery 是一个选项，你可以使用它：

$('nav ul > li').css('width',($('nav').width()/$('nav ul > li').size()) +'px');

在这里小提琴： http: //jsfiddle.net/jAptc/6/