水平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的动态宽度

回答

相关问题