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

Question

我需要帮助尝试将水平菜单的间距设置为其父菜单的宽度 <div> .

问题在于 <ul> 中的列表项是动态的，因此有多种组合，具体取决于您是否登录、是否已加入该页面以及您是否是管理员。

我已经设置了<ul>成为100%家长的<div> 。这很好用。目前我的<li>全部都是左对齐的，你可以在 http://www.daddyleagues.com/OzeSportsCFM 上看到这一点(这是包含主教练统计数据等的部分)

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

所以我想知道是否有什么神奇的方法可以制作 <li> s计算自己的%

我想我可能只需要创建一些 JavaScript 函数来添加 % 中的宽度取决于出现的元素。这是最后的手段，希望有人有更简单的方法。

Answer 1

您可以使用css3 flexbox .

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

了解有关 Flexbox @ css-tricks 的更多信息

Flexbox浏览器支持@ caniuse