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

Question

我最近从 Bootstrap 切换到 Foundation，只是为了顶部导航栏。我想将菜单项设置为始终进行相应调整并始终填充栏。
此处提供了一个引导示例：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 演示。

添加和删​​除列表项以查看它的工作原理。