并排列表项作为div（css）中的图标 [英] Side-by-side list items as icons within a div (css)

问题描述

我要寻找一种方式来创建一个< UL> 的项目，我可以在一个<放; DIV> 并让它们并排显示，并在浏览器窗口调整大小时换行到下一行。

I am looking for a way to create a <ul> of items that I can put within a <div> and have them show up side-by-side and wrap to the next line as the browser window is resized.

例如，如果我们在列表中有10个项目，当前显示第一行上的5个项目和第二行上的5个项目，因为用户创建浏览器窗口

For example, if we have 10 items in the list that currently show 5 items on the first row and 5 items on the second row, as the user makes the browser window wider, it turns into 6 items on the first row and 4 items on the second row, etc.

我正在寻找类似的功能，什么Windows资源管理器在瓷砖时，第一行6个项目和第二行4个项目/ icons /缩略图视图。我可以创建< li> 我想要的大小，颜色，内容等我只是有麻烦的包装/等等。部分

I am looking for similar functionality to what Windows Explorer does when in tiles/icons/thumbnails view. I am able to create the <li>'s I want as far as the size, color, content, etc. I am just having trouble with the wrapping/clearing/etc. part.

推荐答案

给李浮动：左（或右）

他们将在同一行，直到在容器中没有更多的空间（你的情况，一个ul）。
（forgot）：如果你有一个块元素在浮动元素之后，他也会坚持他们，除非你给他一个清楚：两者，或者在它之前放一个空的div与clear：both

They will all be in the same line until there will be no more room in the container (your case, a ul). (forgot): If you have a block element after the floating elements, he will also stick to them, unless you give him a clear:both, OR put an empty div before it with clear:both

这篇关于并排列表项作为div（css）中的图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！