Question

我需要帮助尝试将我的水平菜单与其父div的宽度区分开来。

问题是UL中的列表项是动态的，因此根据您是否已登录，是否已加入页面以及您是否为管理员，有许多组合会有所不同

我已将UL设置为父div的100％。这很好用。目前我的lis都刚刚左对齐，你可以在http://www.daddyleagues.com/OzeSportsCFM看到这个（这是家庭教练统计数据等部分）...

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

所以我想知道是否有任何神奇的方法可以让李自己计算出自己的％

我想我可能只需要创建一些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 + '%;');
});

水平ul菜单 - 具有动态宽度的动态li

2 个答案: