css - 是否可以让 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