jquery - 如何使导航菜单适合其容器？ [横向]

Question

我正为这个而焦头烂额。基本上，我需要我的菜单根据菜单的内容水平放置一个容器。所以，我知道 table 和 table-cell 属性可以做到这一点。但是，当我将其与 Superfish Menu 结合使用时我根本无法扩展以适应容器。

我还需要菜单之间的边距/空间，table-cell 似乎完全忽略了这一点。

在这里查看 fiddle 演示，http://jsfiddle.net/TUQpV/10/

Answer 1

您需要执行以下两项操作之一。使所有菜单项的大小保持不变是填充容器的最简单方法，因为您已经对其大小进行了硬编码。

您的另一个选择是创建一些 javascript 来确定 UL 的宽度与父 div 的宽度之间的差异，然后通过增加填充在子元素之间平均分配该空间。原因是 LI 将适合其内容。您需要增加内容以拉伸(stretch)整个菜单。你可以在这里看到我是如何做到的。 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;
}

编辑:您可能应该只更改右边距，这样它就不会破坏任何 future 的边距更改。

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