是否有可能使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