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

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;
}

现场演示

更多信息

Answer 3

Rohit Azad 的绝佳解决方案

但是 IE 6-9 不支持 CSS3 列……如果你想要一个完整的浏览器支持，你可以（有点丑，我知道……）使用这个版本……

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;
}

格力兹