使用单个纯列表自动创建列 [英] Auto Create Columns Using Single Plain List

问题描述

我试图编写灵活的代码，其中我有一个简单< ul> ，它会为每第5个元素自动创建另一列。我找到了一个教程来实现这一点，但是地方项目在水平顺序，而我需要一个垂直顺序。我看到一些其他教程输出垂直顺序，但也附加 class =first和 class =second给每个 li 这不是我想要的。

I am trying to write flexible code where I have one plain <ul> which gets automatically creates another column for every 5th element. I have found a tutorial that achieves this but places the items in a horizontal order whereas I require a vertical order. I have seen some other tutorials that outputs a vertical order, but also attaches class="first" and class="second" to each li which is not what I want. I am looking to do with with my existing HTML code.

我想要的：

-01     -06     -11   
-02     -07     -12
-03     -08     -13
-04     -09     -14
-05     -10     -15

我有：

-01     -02     -03   
-04     -05     -06
-07     -08     -09
-10     -11     -12
-13     -14     -15

CSS：

ul {
    width:760px;
    margin-bottom:20px;
    overflow:hidden;
}

li {   
    float:left;
    display:inline;
}

.double li  { width:50.0%; } /* 2 col */
.triple li  { width:33.3%; } /* 3 col */
.quad li    { width:25.0%; } /* 4 col */
.six li     { width:16.6%; } /* 6 col */

HTML：

<ul class="triple">
  <li>01</li>
  <li>02</li>
  <li>03</li>
  <li>04</li>
  <li>05</li>
  <li>06</li>
  <li>07</li>
  <li>08</li>
  <li>09</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
</ul>

推荐答案

您可以使用代码：

ul
{
    -webkit-column-count: 4; -webkit-column-gap:20px;
    -moz-column-count:4; -moz-column-gap:20px;
    -o-column-count:4; -o-column-gap:20px;
    column-count:4; column-gap:20px;
}

但我不知道它是否适用于所有浏览器。

but I'm not sure if it works in all browsers unfortunately. You should experiment that.

这是jsfiddle使用它： http://jsfiddle.net/leniel/nRL4R/

Here's the jsFiddle to play with it: http://jsfiddle.net/leniel/nRL4R/

这篇关于使用单个纯列表自动创建列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！