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

Question

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

我还需要菜单之间的边距/空间，这table-cell似乎完全无视。

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

Answer 1

只需float: left;从您的.menu li规则中删除。原因是lis 向左浮动基本上会挤压它们一点——即使它们有空间，它们也不会向右扩展。您的演示的工作版本：小链接。

希望有帮助！

Answer 2

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

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