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

Rohit Azad的伟大解决方案

但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

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

3 个答案: