我有一个可变数量的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更好）的某种保证金解决方案可行。有谁知道我该怎么做？
干杯！
更新：显然我没有很好地解释自己。我正在尝试平衡行，而不是确保给定宽度的某个数字。
让我们举一个例子......让我说我有4次空间（我们会说lis在400px的空间内用100px固定）
| ----- ----- ----- ----- |
|| || || || ||
| ----- ----- ----- ----- |
现在当我有5个项目而不是4个和1个时，我想要这个
| ----- ----- ----- |
| | || || | |
| ----- ----- ----- |
| ----- ----- |
| | || | |
| ----- ----- |
6项，3项和3项 共7件，4件和3件 8项，4项和4项 共9项，3 3和3
现在可以开始我需要在PHP中以编程方式执行此操作，但这并不能解决调整窗口大小的问题
答案 0 :(得分：0)
如果您的div大小已修复，请将固定宽度设为特定的li。 例如 假设你有一个像500px这样的div现在我们想要4个项目在顶部，1个在下面。所以li宽度约为110px。
所以请尝试修复你的宽度。
答案 1 :(得分：0)
你应该将前5个包含在div的另一个display:inline-block内，其余div包含display:inline-block {{1}}，当宽度为{2}时少了。
或者您可以编写媒体查询，以使其在不同的屏幕尺寸上表现不同
答案 2 :(得分：0)
Pawan走在正确的轨道上。如果要在顶行上保留一定数量的LI作为最小值，在UL上设置最小宽度也会有所帮助。如果在默认情况下保留溢出，则可以覆盖div宽度。
ul li {
list-style-type: none;
display: inline;
float: left;
width: 100px;
}
ul {min-width：300px; }
body {width：200px; }