问在div中以图标形式并排列表项(css)

EN

给出LI浮点数:左(或右)

它们都将在同一行中，直到容器中没有更多的空间(您的情况下，一个ul)。(忘记)：如果你在浮动元素之后有一个block元素，他也会坚持使用它们，除非你给他一个clear:both，或者在它前面放一个空的div和clear:both

这可以是一个纯CSS解决方案。给定：

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

CSS将为：

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

现在，由于您已经将显示模式从'block‘(隐含)更改为'inline'，所以您应用于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的显示样式更改为“inline”，并在其中嵌套一个块级元素以实现一致的平铺效果。

这里有一个很好的资源，可以用来包装列式列表。http://www.communitymx.com/content/article.cfm?cid=27f87