如何在组中布置列表项

Question

假设我们有一个像这样的html列表:

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    ...
    <li>10</li>
</ul>

如何使用css和/或java脚本让浏览器像这样显示它(以四个为一组,组之间有一些边距):

1 2    5 6    9 10
3 4    7 8    

Answer 1

只需使用column-count,float并width在包装可以应用规则ul的父元素column-count之后:

.colWrap {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    -o-column-count: 3;
    -ms-column-count: 3;
    column-count: 3;
}
li {
    float: left;
    width: 50%;
}?

调整后的HTML:

<div class="colWrap">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
</div>?

JS小提琴演示.

参考文献:

• column-count财产.
• CSS3列兼容性.