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：

私のリストは、同様に3列に分かれて

ul { 
width:60px; 

} 

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

：

1 2 3 
4 5 6 
7 8 9 
10 

だから、私のクエストどのように私はのように私のリストを並べ替えることができます：任意の助け

1 4 7 10 
2 5 8 
3 6 9 

ありがとう：D

Answer 1

あなたはより多くの

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

Answer 2

のためにこれを確認し、このため CSS3 column-countプロパティを使用することができている上

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