包含具有动态宽度的列表项的无序列表 - 水平菜单

Question

我需要帮助尝试将我的水平菜单与其父<div>的宽度<div> 。

问题在于<ul>中的列表项是动态的，因此根据您是否已登录、是否已加入页面以及您是否是管理员，有多种组合会有所不同。

我已将<ul>设置为父<div> 100% 。 这工作正常。 目前我的<li>都是左对齐的，你可以在http://www.daddyleagues.com/OzeSportsCFM上看到这个（这是有主教练数据等的部分）

问题是我只是通过 CMS 使用 CSS 覆盖和 JS（添加类等）来编辑它。 列表确定后，我无法调整宽度。

所以我想知道是否有任何神奇的方法可以让<li>计算自己的%

我想我可能只需要创建一些 JavaScript 函数，它会根据出现的项目以%添加宽度。 这是最后的手段，希望有人有更简单的方法。

Answer 1

您可以使用 css3 flexbox 。

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

阅读更多关于 flexbox @ css-tricks

Flexbox 浏览器支持@caniuse

Answer 2

获取您的列表父元素（ul），为了答案，我们将其称为“菜单”。

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

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