html自动生成的列表添加多列,html – 使用单个普通列表自动创建列

我正在尝试编写灵活的代码,我有一个简单的< 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:

  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值