如何在CSS中設置ul li的樣式？

Question

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

對不起，我的英語！

我有UL李一的問題：

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

所以，我的questi在是：我怎麼可以排序我的列表，如：

1 4 7 10 
2 5 8 
3 6 9 

感謝您的幫助：d

Answer 1

您可以使用CSS3column-count屬性此檢查這個更多

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

Answer 2

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 3

代碼和演示中看到小提琴

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

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

個

SS：

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