html ul 自动换行,如何使用CSS让网页中的li(ul)列表自动换行

一般说来,网页中会大量的使用ul li列表,

通常情况下,我们都是通过在CSS中设置float:left来使所有的列表项在同一行显示,可是,我们有时候也需要换行,今天我在制作热门标签的时候,就遇到了这样一个问题,

li列表分多行显示,并且每一行都要公整的对齐,下面讲一下我的思路:

通过调试,我发现只需要分别设置好ul和li的宽度,即可以实现这个效果,下面是一个例子:

大家可以测试一下

.contentT{ clear:both; border-top:1px solid #fff; border-left:1px

solid #fff;}

.contentT ul{ width: 300px; }

.contentT li{

float:left; list-style-type:none;

height:14px; width:52px;

display:block;

border-right:1px solid #fff;

border-bottom:1px solid #fff; padding:4px 0 2px;

}

  • 北京
  • 广东
  • 上海
  • 山东
  • 江苏
  • 四川
  • 浙江
  • 河南
  • 辽宁
  • 陕西
  • 湖北
  • 湖南
  • 福建
  • 重庆
  • 安徽
  • 河北
  • 山西
  • 广西
  • 江西
  • 甘肃
  • 天津
  • 贵州
  • 吉林
  • 海南
  • 云南
  • 新疆
  • 宁夏
  • 青海
  • 西藏
  • 黑龙江
  • 内蒙古
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值