我怎样才能让一个导航菜单适合其容器？ [水平](How can I make a navigat

我撕我的头发在这一个。 基本上，我需要我的菜单，以适应水平基础上，菜单的内容的容器。 所以，我理解的table和table-cell属性可以做到这一点。 然而，当我与一起使用此快鱼菜单 ，我不能把它扩大到所有适合容器。

我还需要在菜单中，这之间的裕度/空间table-cell似乎完全不顾。

点击这里，查看小提琴演示， http://jsfiddle.net/TUQpV/10/

Answer 1:

你需要做两件事情之一。 使您的所有菜单项的常量大小是填充容器，因为你已硬编码大小的最简单的方法。

你的另一个选择是创建一些JavaScript决定了UL的宽度和父div的宽度之间的差异，然后均匀地分配通过增加填充子元素之间的那个空间。 其原因是，李将适合其内容。 你需要成长的内容，以舒展的整个菜单。 你可以看到我怎么做，在这里。 http://jsfiddle.net/Nilpo/GGQ4V/3/

$(window).load(function() {

var container = $('div.menu-main-menu-container');
var menu = $('ul.menu');

var difference = container.width() - menu.width();

if (difference > 0) {
    var count = menu.children().length;

    var pad = (difference / count) / 2;

    var total = 0;
    menu.children().each(function(){
        var el = $(this);
        var lpad = parseInt(el.css('padding-left'), 10);
        var rpad = parseInt(el.css('padding-right'), 10);

        el.css('padding-left', lpad+pad);
        total += lpad+pad;

        if ((total+rpad+pad) < difference) {
            el.css('padding-right', rpad+pad);
        } else {
            el.css('padding-right', Math.floor(rpad+pad));
        }
        total += rpad+pad;
    });
}
});

添加以下你的CSS将清除最后一个菜单项后间隙为好。

.menu li:last-child {
    margin:0;
}

编辑：你或许应该只是改变了右边距所以它不会破坏任何未来的利润率变化。

.menu li:last-child {
    margin-right: 0;
}

Answer 2:

只是删除float: left; 从你的.menu li的规则。 其原因是浮动的li s到左边基本上是挤压他们一点-他们不会扩大到即使他们有空间的权利。 您的演示的工作版本： 小链接 。

希望帮助！

文章来源: How can I make a navigation menu fit its container? [horizontally]