如何使菜單項填充頂欄

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.

添加&刪除列表中的項目，看看它的工作。