如何将<li>组织成列？</li>

Question

我有一个包含6个项目的未定义列表。我想将这些项目组织成2列，左边是奇数，甚至是右边，无论项目内容高度如何。

基本上是CSS：

ul li
{
    list-style:none;
    width:270px;
    background:#eee;
    margin-bottom:10px;
    padding:10px;
    display:inline;
}

ul li:nth-child(odd)
{
    float:left;
}

ul li:nth-child(even)
{
    float:right;
    clear:right;
}

以下是示例：http://jsfiddle.net/cbacelar/x9jLdg8k/

Answer 1

您可以在没有display: inline-block的情况下使用float。只需使你的LI宽度：50％。

Answer 2

http://jsfiddle.net/x9jLdg8k/2/

将您的ul li规则更改为以下内容：同时添加了width:50%。

ul li
{
    list-style:none;
    width:50%;
    background:#eee;
    margin-bottom:10px;
    padding:10px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    clear:both;
}