如何使导航菜单适合其容器？ [水平] [英] How can I make a navigation menu fit its container? [horizontally]

问题描述

我把头发撕开了。基本上，我需要我的菜单，以适应水平基于菜单的内容容器。所以，我理解表和 table-cell 属性可以做到这一点。但是，当我与超级鱼类菜单结合使用时，我无法获得它扩展到适合容器。

我还需要在菜单之间添加一个边距/空格， table-cell 似乎完全忽视。 p>

查看这里的小说演示， http：// jsfiddle。 net / TUQpV / 10 /

解决方案

您需要做两件事之一。

您的其他选项是创建一些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 -left'），10）; 
 var bpad = 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; 
} 
  

I'm tearing my hair out over this one. Basically, I need my menu to fit a container horizontally based on the contents of the menu. So, I understand the table and table-cell properties can do this. However, when I use this in conjunction with Superfish Menu I can't get it to expand to fit the container at all.

I also need a margin/space between the menu, which table-cell seems to completely disregard.

Check out the fiddle demo here, http://jsfiddle.net/TUQpV/10/

解决方案

You'll need to do one of two things. Making all of your menu items a constant size is the easiest way to fill the container since your have hard-coded its size.

Your other option is to create some javascript that determines the difference between the width of the UL and the width of the parent div and then evenly distributes that space among the child elements by increasing the padding. The reason is that the LI will fit to its contents. You'll need to grow the contents to stretch the whole menu. You can see how I do that here. 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;
    });
}
});

Adding the following to your CSS will clear the gap after the last menu item as well.

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

EDIT: You should probably just change the right margin so it doesn't break any future margin changes.

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

这篇关于如何使导航菜单适合其容器？ [水平]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！