水平UL菜單 - 動態LI的動態寬度

我需要幫助，試圖將我的水平菜單空間的父div的寬度。水平UL菜單 - 動態LI的動態寬度

問題是UL中的列表項是動態的，所以根據您是否登錄，您是否加入了頁面以及您是否是管理員。

我已經將UL設置爲父div的100％。這工作正常。目前我所有的只是左對齊，你可以看到這在http://www.daddyleagues.com/OzeSportsCFM（這是家庭教練統計等部分）...

問題是，我只是通過使用CSS覆蓋和JS（添加類等）通過一個CMS。列表確定後，我無法調整寬度。

所以我想知道是否有任何神奇的方式，使李的自己算算％

我想我可能只需要創建一些JavaScript函數取決於什麼項目顯示它增加了寬度在％。這是最後的手段，希望有人有一些更簡單的方法。

感謝

來源

2014-09-11 applaps

可以發表演示。 – 2014-09-11 04:27:19

你有沒有看到對齊的導航http://getbootstrap.com/components/#nav-justified – Exlord 2014-09-11 04:36:40

您可以使用CSS3 flexbox。

ul{ 
display:flex; 
justify-content: space-around; 
}

瞭解更多關於Flexbox的@css-tricks

Flexbox的瀏覽器支持@caniuse

來源

2014-09-11 04:30:17

良好的電話flexbox！但是，它的IE支持並不理想：http://caniuse.com/#feat=flexbox 雖然我們不知道他的瀏覽器支持需求，但是， – 2014-09-11 04:35:03

哇，太棒了！比我所寫的60行javascript函數要好得多......我用justify-content：center作爲空間，但在我的lis之間有一個很大的醜陋空間，而不是實際上讓lis變寬......有什麼辦法可以空間在他們之間沒有填充？ http://i.imgur.com/gRMB7sQ.png – applaps 2014-09-12 00:03:34

讓你列表中的父元素（UL），讓我們把它稱爲「菜單」的回答的緣故。

var menu = document.getElementById('menu'), 
    width = 100/menu.length; 

Array.prototype.slice.call(menu.children).forEach(function(li) { 
    li.setAttribute('style', 'width:' + width + '%;'); 
});

來源

2014-09-11 04:32:39

水平UL菜單 - 動態LI的動態寬度

回答

相關問題