如何使導航菜單適合其容器？ [水平地]

我正在把我的頭髮撕掉。基本上，我需要我的菜單根據菜單的內容水平放置一個容器。所以，我明白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

如何使導航菜單適合其容器？ [水平地]

回答

相關問題