Question

我正在使用一系列带有不同长度条目的 li 标签的有序列表。我想把它们分成两列（现在不使用列数）。我想要实现的是：

Item 1              Item 2
Item 3 so           Item 4
long it overflows  
Item 5              Item 6
Item 7 also too     Item 8
long but isn't such
a problem on right

但这是我充其量的。

Item 1             Item 2
Item 3 so          Item 4
long it overflows  Item 5
Item 6             Item 7 also too long but
                   isn't such a problem on right
Item 7             Item 8

无论我尝试什么，浮动，显示：内联等，充其量我得到了我的第一个例子。任何人都可以想到在CSS中这样做的干净方法吗？

编辑：jsfiddle：http://jsfiddle.net/c0rLqqbw/1

Answer 1

根本不要使用列。尝试：

.myContainer li {
  float: left;
  width: 50%;
}

Answer 2

您可以使用flexbox，但浏览器支持不多。

HTML

<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3 So long it overflows</li>
   <li>Item 4</li>
   <li>Item 5</li>
   <li>Item 6</li>
   <li>Item 7 also too long but isn't such a problem on right</li>
   <li>Item 8</li>
</ul>

CSS

ul {
   display: flex;
   flex-flow: row wrap;
   width: 200px;
   list-style-type: none;
   padding: 0px;
   margin: 0px;
}

li {
   flex: 1 1 50%;
}

Answer 3

问题有点令人困惑，但如果你的意思是将一个订单列表分成2个cloumns与css，那么你可以使用：

HTML：

<ol>
    <li>item 1</li> 
    <li>item 2</li> 
    <li>item 3 - so Item 4 long it overflows so Item 4 long it overflows</li> 
    <li>item 4</li> 
    <li>item 5</li> 
    <li>item 6</li> 
    <li>item 7 - also too long but isn't such
a problem on right</li> 
    <li>item 8</li>
<ol>

CSS：

ol
{
    margin: 0;
    padding: 0;
}

li
{
    list-style: none;
    width: 50%;
    padding: 5px;
}

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

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

示例：http://jsfiddle.net/rm8Ldyyj/

两列中的有序列表，带有一些长条目

3 个答案: