并排列表项作为div(css)中的图标

Question

我正在寻找一种方法来创建一个<ul>项目,我可以把它放在一个<div>并让它们并排显示并在浏览器窗口调整大小时换行到下一行.

例如,如果列表中有10个项目,当前第一行显示5个项目,第二行显示5个项目,则当用户使浏览器窗口变宽时,第一行将变为6个项目,第一行变为4个项目第二排等

我正在寻找类似于Windows资源管理器在图块/图标/缩略图视图中所做的功能.我能够创建<li>我想要的尺寸,颜色,内容等等.我只是在包装/清理等方面遇到麻烦.部分.

Answer 1

给LI浮动:左(或右)

他们都将在同一条线上,直到容器中没有空间(你的情况,ul).(忘了):如果你在浮动元素后面有一个块元素,他也会坚持使用它们,除非你给他一个明确的:两者,或者在它之前放一个空的div:两个

Answer 2

这可以是纯CSS解决方案.鉴于:

<ul class="tileMe">
    <li>item 1<li>
    <li>item 2<li>
    <li>item 3<li>
</ul>

CSS将是:

.tileMe li {
    display: inline;
    float: left;
}

现在,由于您已将显示模式从"块"(隐含)更改为"内联",因此应用于li元素的任何填充,边距,宽度或高度样式都不起作用.你需要在li里面嵌套一个块级元素:

<li><a class="tile" href="home">item 1</a></li>

并添加以下CSS:

.tile a {
    display: block;
    padding: 10px;
    border: 1px solid red;
    margin-right: 5px;
}

此解决方案背后的关键概念是您将li的显示样式更改为"内联",并将块级元素嵌套在内部以实现一致的平铺效果.