问题是
<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
那么各位,这可能吗?
最佳答案
您可以使用多个CSS3列计数属性
来获得您想要的结果,请参阅您要求的代码:-
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
关于css - 是否可以使 LI 元素在 UL 中垂直溢出?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12454306/