是否有可能使LI元素在UL中垂直溢出？

Question

問題是

<ul> 
<li>test1</li> 
<li>test2</li> 
<li>test3</li> 
<li>test4</li> 
<li>test5</li> 
<li>test6</li> 
<li>test7</li> 
<li>test8</li> 
<li>test9</li> 
<li>test10</li> 
<li>test11</li> 
<li>test12</li> 
</ul> 

是這樣的......其結果是

test1 test2 test3 
test4 test5 test6 
test7 test7 test9 
test10 test12 test12 

，我更喜歡像這樣：P

test1 test5 test9 
test2 test6 test10 
test3 test7 test11 
test4 test8 test12 

所以，球員是否有可能？

Answer 1

您可以使用Multiple CSS3 column-count Property你想要的結果看到你的要求的代碼： -

HTML

<ul class="three-col"> 
<li>test1</li> 
<li>test2</li> 
<li>test3</li> 
<li>test4</li> 
<li>test5</li> 
<li>test6</li> 
<li>test7</li> 
<li>test8</li> 
<li>test9</li> 
<li>test10</li> 
<li>test11</li> 
<li>test12</li> 
</ul> 

CSS

.three-col { 
     -moz-column-count: 3; 
     -moz-column-gap: 20px; 
     -webkit-column-count: 3; 
     -webkit-column-gap: 20px; 
     list-style-type:none; 
} 

我認爲這也將幫助你： - http://tinkerbin.com/KLNj5ghL

Answer 2

嗨，現在你可以使用css3性能column-count

的CSS

ul{ 
list-style:none; 
} 
li{ 
border-bottom:solid 1px red; 
} 

ul 
{ 
-moz-column-count:3; /* Firefox */ 
-webkit-column-count:3; /* Safari and Chrome */ 
column-count:3; 
} 

live demo

more info

Answer 3

由羅希特阿扎德

但是IE 6-9的最佳解決方案不支持CSS3 coloumn ... 如果你想要一個完整的瀏覽器支持，你可以（有點難看，我知道...）使用這個版本...

HTML：

<ul> 
<li>test1</li> 
<li>test2</li> 
<li>test3</li> 
<li>test4</li> 
</ul> 
<ul> 
<li>test5</li> 
<li>test6</li> 
<li>test7</li> 
<li>test8</li> 
</ul> 
<ul> 
<li>test9</li> 
<li>test10</li> 
<li>test11</li> 
<li>test12</li> 
</ul> 

CSS：

ul 
{ 
    border:1px solid black; 
    float: left; 
    width: 100px; 
    list-style:none; 
} 

Greez