我如何在CSS中设置ul li的样式？

Question

  

可能重复：
  I want to show list items as 2 or more columns (dynamic alignment)

抱歉我的英文！

我有ul li的问题：

我的HTML：

<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>

我的css：

ul {
width:60px;

}

ul li{
float:left;
width:20px;
list-style:none;
}

我的列表分为3列，如：

1 2 3
4 5 6
7 8 9
10

所以，我的问题是：如何对列表进行排序，如：

1 4 7 10
2 5 8
3 6 9

感谢您的帮助：D

Answer 1

您可以使用 css3 column-count属性进行此项检查以获取更多信息

I want to show list items as 2 or more columns (dynamic alignment)

Answer 2

请参阅小提琴代码和演示

小提琴：http://jsfiddle.net/pGHCd/

演示：http://jsfiddle.net/pGHCd/embedded/result/

SS：

Answer 3

CSS3救援！

ul {
    width:60px; height: 60px;
}

ul li{
    float:left;
    width:20px;
    list-style:none;
}
ul, ul li {
    -moz-transform: rotate(-90deg) scaleX(-1);
    -o-transform: rotate(-90deg) scaleX(-1);
    -webkit-transform: rotate(-90deg) scaleX(-1);
    -ms-transform: rotate(-90deg) scaleX(-1);
    transform: rotate(-90deg) scaleX(-1);
}

http://jsfiddle.net/rlemon/Y5ZvA/2/

Answer 4

您好，您可以在css3属性上执行此操作

<强>的CSS

ul{
    -moz-column-count: 3;
    -moz-column-gap: 33%;
    -webkit-column-count: 3;
    -webkit-column-gap: 33%;
    column-count: 4;
    column-gap: 33%;
    background:green;
    width:100px;

}
li{
    height:20px;
    list-style:none;
}

HTML

<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>
​

现场演示http://jsfiddle.net/rohitazad/pMbtk/376/

但是IE不工作