html - 如果内联元素超过 max-width 并分成两行，CSS max-width 会导致太多空白

Question

我正在尝试设置 li 元素的样式以动态地适应其文本内容，使其在 li 的 之间具有相等的间距，但似乎无法实现这一点。

目前的结果是这样的:

我希望 li's 之间的空白保持一致，但整个 li's 是动态宽度但不超过特定宽度:(因为有两个不同的 ul 它们是具有不同填充的样式，因此这就是为什么左侧菜单和右侧菜单之间的空间大小不同，但每个 li 在各自的 ul 中始终保持间隔)

CSS 是(任意):

li{
   display: inline-block;
   max-width: 95px;
   padding: 5px 10px;
   etc....
}

我正在尝试使用 css 来完成此操作，尽可能避免使用 JavaScript 或 html 标记。谢谢。

Answer 1

如果您希望元素之间的空格相同，即。较小的标题将有较小的菜单项，就像在您的图像中那样，那么您就不走运了。我不认为没有 JavaScript 就可以做到这一点。

如果您要设置统一宽度的菜单项，那么这很容易实现，只需设置 <li> s 至 100%/(number of menu items)并漂浮它们。

li {
    float:left;
    width:14.2857% /* 100/17 */
}