Question

<style>
ul{margin:0px;padding:0px;}
ul li{margin:0px 5px 5px 0px;padding:0px;list-style-type:none;float:left;}
</style>

<ul class="clearfix">
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
</ul>

first li 包含的内容多于其他内容。

所以，我有以下问题：
problem http://img830.imageshack.us/img830/240/problemc.png

但是如何将下一行向下移动，所以看起来像这样： want this http://img440.imageshack.us/img440/9750/solutionm.png

我尝试使用 display：inline-block; 而不是 float：left; 用于 lis ，这有效，但我会仍然宁愿使用 float：left; 而不是内联块。

关于如何做到这一点的任何想法？

IE的解决方案：
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

Answer 1

首先：您确定使用的是正确的标记吗？列表通常不会看起来像那样。

二。你知道连续多少件物品吗？在你的图像中，它们似乎具有相同的宽度。如果您知道可以将clear:both;添加到第四个li（以及您可能需要的其他内容）并强行删除。这是使用左浮动li进行此操作的唯一方法。

Answer 2

您不能仅使用float:left执行此操作;如第一个例子所示，这些块就会落到适合的位置。如果您希望内容始终显示在三列中，则可以通过编程方式清除每行中第一项的浮动。

Answer 3

最佳解决方案是使用一种鲜为人知的名为table-cell的显示样式。

我不得不这样做几次。这是你如何做到的：

/* -*- CSS -*- */
ul li .wrapper
{
    display:table-cell;
    width:100px;     /*replace here*/
    min-height:100px;/*  "     "   */
}

ul li
{
    float:left;
    display:inline-block;
}
ul
{
    display:table;
}

...

<!-- HTML -->
<ul>
    <li><div class="wrapper">my-content</div></li>
    <li><div class="wrapper">my-content</div></li>
    <li><div class="wrapper">my-content</div></li>
    <li><div class="wrapper">my-content</div></li>
</ul>

这是如何运作的：

当解析器看到有一个UL对象时，它会将其视为表而不是列表。这给你一个明显的优势，你开始/行动/喜欢你正在使用表格（但你不是！）

然后规则针对包装类运行 - 这会创建一个“表格单元格”。我们不想把它放在li中，因为OTHERWISE li将充当表格单元格。这有点糟糕。解决方法是你的li实际上是左对齐的。有一些争论是否以这种方式做到这一点是个好主意 - 这是“最有效”，因为它迫使箱子模型遵守。我知道它很难看。

REASON对李被视为表格单元格的不利之处在于它不会包装。它不会包装的原因是表格单元不应该换行。

还有一个其他可能有效的解决方案，但我还没有测试过。

/* -*- CSS -*- */
ul li { display: inline-block; float:left; min-height:200px;width:200px; }

它不那么难看，但它应该通过使盒子模型强制对齐来起作用。

CSS - 浮动LIs - 更大的内容会混淆下一行

3 个答案: