html - 将内联 li 包装成相等的行

Question

我有可变数量的 LI，它们使用 CSS 在整个页面(在导航菜单中)内联显示，如下所示:

 ul.nav{
    margin: 0;
    padding: 0;
    text-align: center;
 }

 ul.nav li{
    margin: 0;
    padding: 5px 10px;
    list-style: none;
    display: inline-block;
 }

当页面变窄时，导航菜单会自动换行，但是，我想尝试使每行的元素数相等。

例如，当出现 9 个元素时，页面只能容纳 8 个，我希望顶行有 5 个，下面有 4 个，而不是顶行有 8 个，然后在孤独的 li 上移动到下一行。问题是它们必须在这个模板中居中对齐，所以第一行满而第二行只有一个元素看起来很糟糕。

它不必非常精确，因此某种可能强制降低一些(6 和 3 比 8 和 1 更好)的 margin 解决方案会起作用。有谁知道我该怎么做？

干杯!

更新:显然我没有很好地解释自己。我试图平衡行，而不是确保给定宽度的特定数字。

举个例子...假设我有 4 倍的空间(我们会说 lis 在 400px 空间中固定为 100px)

| -----  -----  -----  ----- |
||     ||     ||     ||     ||
| -----  -----  -----  ----- |

现在当我有 5 个元素，而不是 4 个和 1 个时，我想要这个

|    -----  -----  -----     |
|   |     ||     ||     |    |
|    -----  -----  -----     |
|        -----  -----        |
|       |     ||     |       |
|        -----  -----        |

对于 6 个元素，3 和 3 对于 7 个元素，4 和 3 对于 8 个元素，4 和 4 对于 9 个元素，3 3 和 3

现在我开始意识到我需要在 PHP 中以编程方式执行此操作，但这并不能解决人们调整窗口大小的问题

Answer 1

如果您的 div 大小是固定的，那么请给一个特定的 li 固定宽度。 例如 假设你有一个像 500px 这样的 div，现在我们想要顶部有 4 个元素，下面有 1 个。所以 li 宽度大约为 110px。

所以请尝试修正你的 li 宽度。