如何使菜单项填充顶栏

Question

我最近从Bootstrap切换到Foundation，仅用于顶部导航栏。我希望设置菜单项以随时进行相应的调整并随时填写栏。
这里有一个引导示例：http://getbootstrap.com/2.3.2/examples/justified-nav.html
在此示例中，无论菜单中存在多少项目，它们总是相应地调整其宽度，以便始终填充导航栏。
我如何在基金会实现这样的事情？

Answer 1

您可以使用jQuery来计算li的数量，并将每个li的宽度设置为适当的％。

所以8个列表中的项目都是12.5％;

JQuery的

(function($){ 
    $.fn.autowidth = function() { 
    return this.each(function() {   
     $('li', this).css({'width' : (100/$('li', this).length) + '%'}) 
    }); 
    }; 
})(jQuery); 

$(document).ready(function(){ 
    $('nav > ul').autowidth();  
}); 

CODEPEN DEMO.

添加&删除列表中的项目，看看它的工作。