html - 如何将 <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%。