html – 使用单个普通列表自动创建列

概述我正在尝试编写灵活的代码,我有一个简单的< ul>它会自动为每个第5个元素创建另一列.我找到了一个实现这个目标的 tutorial但是将项目放在水平顺序而我需要垂直顺序.我已经看到一些其他教程输出垂直顺序,但也将class =“first”和class =“second”附加到每个li,这不是我想要的.我希望使用现有的HTML代码. 我想要的是： -01 -06 -11 -0 我正在尝试编写灵活的代码,我有一个简单的< ul>它会自动为每个第5个元素创建另一列.我找到了一个实现这个目标的 tutorial但是将项目放在水平顺序而我需要垂直顺序.我已经看到一些其他教程输出垂直顺序,但也将class =“first”和class =“second”附加到每个li,这不是我想要的.我希望使用现有的HTML代码.

我想要的是：

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

解决方法 你可以使用这个 code：

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

但不幸的是,我不确定它是否适用于所有浏览器.你应该试验一下.

这是Jsfiddle玩它：http://jsfiddle.net/leniel/nRL4R/

总结

以上是内存溢出为你收集整理的html – 使用单个普通列表自动创建列全部内容，希望文章能够帮你解决html – 使用单个普通列表自动创建列所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。