1

我有可变数量的 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 中以编程方式执行此操作的事情，但这并不能解决人们调整窗口大小的问题

4

3 回答 3

0

帕万走在正确的轨道上。如果您想在顶行保持一定数量的 LI 作为最小值，在 UL 上设置最小宽度也会很有帮助。如果您在默认情况下保留溢出，这可以覆盖 div 宽度。

ul li { 
list-style-type: none;
display: inline;
float: left;
width: 100px;

}

ul { 最小宽度：300px; }

身体{宽度：200px；}

见小提琴

于 2013-01-25T05:02:27.977 回答
0

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

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

于 2013-01-25T04:20:01.130 回答
0

您应该将前 5 个包裹在另一个里面，div其余display:inline-block的包裹在另一个里面，当宽度更小时，它们应该分成两个。divdisplay:inline-block

或者您可以编写媒体查询以使其在不同的屏幕尺寸上表现不同

http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

http://www.w3.org/TR/css3-mediaqueries/

http://mediaqueri.es/

于 2013-01-25T04:23:38.943 回答