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

我正在把我的头发撕掉。基本上，我需要我的菜单根据菜单的内容水平放置一个容器。所以，我明白table和table-cell属性可以做到这一点。但是，当我将此与Superfish Menu结合使用时，我无法将其扩大以适应容器。如何使导航菜单适合其容器？ [水平地]

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

退房这里的小提琴演示，http://jsfiddle.net/TUQpV/10/

来源

2012-08-24 SMacFadyen

你的小提琴是要求密码！ – hsalama

固定。对不起，我有htaccess的限制。 – SMacFadyen

请说明预期会发生什么？什么方向的宽度或高度展开？ – kannix

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

你的另一种选择是创建一些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; 
}

来源

2012-08-24 16:59:20 Nilpo

我想我会需要这样的事情来实现这一点。非常感谢花时间回答这个问题，一个真实的传说。 – SMacFadyen

完全没问题。很高兴我能帮忙。 – Nilpo

只需从.menu li规则中删除float: left;。原因是，将li s左移基本上是压扁他们有点 - 即使他们有空间他们也不会扩展到右边。演示版的工作版本：little link。

希望有帮助！

来源

2012-08-24 15:53:59 Chris

这确实填充了容器，但是它a）打破了下拉c）不允许我将元素排除在外。看到这个小提琴：http://jsfiddle.net/TUQpV/16/ – SMacFadyen

@SMacFadyen增加：'.sub-menu li {float：left; } *部分*修复了下拉问题：[小链接到小演示]（http://jsfiddle.net/TUQpV/18/）。将继续努力。 – Chris

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

回答

相关问题