css - 如何使菜单项填充顶部栏

Question

我最近从 Bootstrap 切换到 Foundation，只是为了顶部导航栏。我想将菜单项设置为始终进行相应调整并始终填充栏。
此处提供 Bootstrap 示例:http://getbootstrap.com/2.3.2/examples/justified-nav.html
在这个例子中，无论菜单中有多少元素，它们总是相应地调整它们的宽度，以便导航栏总是被填满。
我如何在 Foundation 中实现这样的事情？

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.

添加和删除列表项以查看其工作情况。