如何使菜单项填充顶部栏

Question

我最近从Bootstrap切换到Foundation，仅用于顶部导航栏。我想将菜单项设置为始终相应调整并始终填充栏 这里有一个bootstrap示例：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.

添加＆amp;删除列表项以查看它是否有效。