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

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

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;

}

• 北京
• 广东
• 上海
• 山东
• 江苏
• 四川
• 浙江
• 河南
• 辽宁
• 陕西
• 湖北
• 湖南
• 福建
• 重庆
• 安徽
• 河北
• 山西
• 广西
• 江西
• 甘肃
• 天津
• 贵州
• 吉林
• 海南
• 云南
• 新疆
• 宁夏
• 青海
• 西藏
• 黑龙江
• 内蒙古