我最近从 Bootstrap 切换到 Foundation,只是为了顶部导航栏。我想将菜单项设置为始终进行相应调整并始终填充栏。
此处提供 Bootstrap 示例:http://getbootstrap.com/2.3.2/examples/justified-nav.html
在这个例子中,无论菜单中有多少元素,它们总是相应地调整它们的宽度,以便导航栏总是被填满。
我如何在 Foundation 中实现这样的事情?
最佳答案
您可以使用 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();
});
添加和删除列表项以查看其工作情况。
关于css - 如何使菜单项填充顶部栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19563697/