使用下面的HTML,将列表显示为两列的最简单方法是什么?

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
</ul>

想要显示:

A B
C D
E

解决方案需要与Internet Explorer兼容。


当前回答

这对我来说是一个完美的解决方案,我找了很多年:

http://css-tricks.com/forums/topic/two-column-unordered-list/

其他回答

你可以很容易地用jQuery-Columns Plugin来做到这一点,例如,用一个。mylist类来分割一个ul

$('.mylist').cols(2);

下面是jsfiddle的一个实例

我喜欢这个比CSS更好,因为在CSS解决方案中,不是所有东西都垂直对齐到顶部。

在updateColumns()中需要if (column >= columns.length)而不是if (column > columns.length)来列出所有元素(例如跳过C),因此:

function updateColumns(){
    column = 0;
    columnItems.each(function(idx, el){
        if (column >= columns.length){
            column = 0;
        }
        console.log(column, el, idx);
        $(columns.get(column)).append(el);
        column += 1;
    });
}

http://jsfiddle.net/e2vH9/1/

我喜欢现代浏览器的解决方案,但缺少子弹,所以我添加了一个小技巧:

http://jsfiddle.net/HP85j/419/

ul {
    list-style-type: none;
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
}


li:before {
  content: "• ";
}

这对我很管用。 最好的解决方案是因为一行中的单元格具有相同的高度而不考虑内容吗

申{ 显示屏:网格; 格栅:重复(2,1 fr); list-style-position:内心; list-style-type:郎; 的 li {border:固体1px;的 <德> <li>asdasd asdasd asdasd asdasd adasdasd adasdadasd adadas dasdadasdasd asd </li> < li > B < / li > < li > C < / li > < li > D < / li > < li > E < / li > < /德>

这可以使用父div上的column-count css属性来实现,

like

 column-count:2;

查看更多细节。

如何使浮动DIV列表出现在列,而不是行