CSS - 浮动 LI - 较大的内容会弄乱下一行
<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> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
第一个 li 包含的内容比其他内容更多。
所以，我有以下问题：
问题 http://img830.imageshack.us/img830/240/problemc.png
但是我如何向下移动下一行，所以它看起来像这样： 想要这个 http://img440.imageshack.us/img440/9750/solutionm.png< /a>
我尝试使用 display:inline-block; 而不是 float:left; 作为 lis，它有效，但我会仍然宁愿使用 float:left; 而不是 inline-block。
关于如何做到这一点有什么想法吗？
<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> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
The first li contains more content than the rest.
So, I have the following problem:
problem http://img830.imageshack.us/img830/240/problemc.png
But how do I move the next row down, so it looks like that:
want this http://img440.imageshack.us/img440/9750/solutionm.png
I tried using display:inline-block; instead of float:left; for the lis, which works, but I'd still rather use float:left; over inline-block.
Any ideas on how to do this?
Solution for IE:
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
首先：您确定使用了正确的标记吗？列表通常不会是这样的。
第二。你知道你一排会有多少件物品吗？在你的图像中，它们似乎具有相同的宽度。如果您知道可以将
clear:both;添加到第四个li（以及您可能需要的其他内容）并强制其关闭。这将是使用左浮动 li 实现此目的的唯一方法。First of all: Are you sure you're using the right markup? A list generally doesn't end up to look like that.
Second. Do you know how many items you will have on a row? In your image they seem to have the same width. If you know that you can add
clear:both;to the forthli(and other you may need) and force it down. This would be the only way to do it with left floatinglis.仅使用
float:left无法做到这一点；正如第一个示例所示，这些块恰好落入其适合的位置。如果您希望内容始终显示在三列中，则可以通过编程方式清除每行第一项的浮动。You can't do this using only
float:left; the blocks just fall into place where they fit as your first example shows. If you intend for your content to always display in three columns, you could programmatically clear the float on the first item in each row.最好的解决方案是使用一种鲜为人知的显示样式，称为表格单元格。
我不得不这样做几次。操作方法如下：
...
工作原理：
当解析器发现存在 UL 对象时，它会将其视为表格而不是列表。这给你带来了明显的优势，你开始/行动/就像你正在使用表格一样（但你不是！）
然后规则针对包装类运行——这将创建一个“表格单元格”。我们不想将其放在 li 中，因为否则 li 将充当表格单元格。这有点糟糕。解决方法是你的 li 实际上是左对齐的。对于这样做是否是一个好主意存在一些争论——这是“最有效的”，因为它迫使盒子模型遵守。我知道这很丑陋。
将 li 视为表格单元格不好的原因是它不会换行。它不会换行的原因是表格单元格不应该换行。
还有另一种解决方案可能有效，但我尚未对其进行测试。
它并不那么丑陋，但它应该通过使盒模型强制对齐来工作。
The best solution is to use a little-known display style called table-cell.
I've had to do this a few times. Here's how you do it:
...
How this works:
When the parser sees that there's a UL object, it treats it like a table instead of a list. This gives you the distinct advantage that you're beginning to /act/ like you're working with tables (but you're not!)
The rule then runs against the wrapper class -- this creates a "Table cell". We don't want to put it in the li because OTHERWISE the li will act as the table cell. This is kinda bad. the work around is that your li is actually aligned left. There's some argument whether or not is a good idea to do it this way -- this is the "Most Effective" because it forces the box model to comply. Its fugly, I know.
the REASON its bad for the li to be treated like a table-cell is that it won't wrap. The reason it wont wrap is that table-cells aren't supposed to wrap.
There is ONE other solution that might work, however I haven't tested it.
Its not as ugly, but it should work by making the box model force the alignment as well.