Html 如何在可变宽度的父级中均匀地分隔元素（多行）？

所以我在我的网站上有一个UL，大约有30个列表项，每个列表项都包含一个大约130像素宽的图标，所以列表可以扩展到多行

我遇到的问题很难解释，所以我会尝试使用

所以我想要的是，每个列表项之间的空间是动态的，并使其最右边的列表项接触屏幕边缘，而不是出现间隙，直到有足够的空间容纳新的列表项。一旦有足够的空间让另一个列表项进入该行，项目之间的宽度就会重置

正在恢复，请转到以下位置：

|[aaaaaaaaa][bbbbbbbbbb][cc]       |
|[dddddddddddddddddddbb][eeeee]    |

在这方面：

| [aaaaaaaaa]  [bbbbbbbbbb]  [cc] |
| [dddddddddddddddddddbb]  [eeeee]|

---

希望这是有意义的，如果这在某种程度上是不正确的，请向我们道歉。

据我所知，只有使用javascript才能实现

试试插件。最小化版本约为15kb

---

如果我了解您的需求，那么您可以使用flexbox：

像这样：

ul {
    display: flex;
    margin: 10px auto;
    padding: 0 10px;
    flex-wrap: wrap;
    justify-content: space-between;
}

演示：

---

然而，目前支持非常有限（），因此只有当您找到合适的polyfill，或者只是希望支持最新的浏览器时，这才有效。

请确认我的编辑是否代表您想要的内容。不确定如何确认，除非您只是指回复，但这确实代表了我想要的内容！谢谢你，只是想让问题更具可读性。等等，也许有人可以用纯CSS解决方案来思考。你看到这个了吗？唯一的问题是，我不知道你会如何编码，以允许下面的额外项目，以适应酒吧一旦有一定量的自由空间。我还意识到我链接的JSFIDLE是在我编辑它之前创建的，现在我知道下次你必须更新它！JSFIDLE中有大约30个列表项，但遗憾的是我是个白痴哈哈。但是BYossarian的答案非常适合我的需要。有趣的插件，虽然看了演示页面似乎不是解决方案。但我会玩这个，一定要了解动画使用，因为它看起来很好（我只是开始学习HTML/JS/CSS最近，所以每一个小的帮助：）这是完美的！就像我想要的一样。我对浏览器不太在意，因为我制作的只是一个展示想法的原型，将在chrome中展示。非常感谢，有时间开始阅读更多内容。我甚至不知道这个新的显示值。很不错的！此解决方案未在中列出。我建议你也在那里发布这个解决方案，这是一个很好的答案。

ul {
    display: flex;
    margin: 10px auto;
    padding: 0 10px;
    flex-wrap: wrap;
    justify-content: space-between;
}