Question

我正在撕掉这头发。基本上，我需要我的菜单根据菜单的内容水平放置容器。因此，我了解table和table-cell属性可以执行此操作。但是，当我将它与Superfish Menu结合使用时，我根本无法扩展以适应容器。

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

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

Answer 1

只需从float: left;规则中删除.menu li即可。原因是将li s向左浮动基本上是压缩它们 - 即使它们有空间也不会向右扩展。演示的工作版本：little link。

希望有所帮助！

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;
}

如何使导航菜单适合其容器？ [水平]

2 个答案: