现在的位置: 首页 > 综合 > 正文

li自动换行效果

2018年05月15日 ⁄ 综合 ⁄ 共 748字 ⁄ 字号 评论关闭

研究了一下,其实挺简单的就是,ul给个宽度,然后LI也同样给个宽度和高度,当li的宽度超过ul的宽度的时候,li就会自动换行.

li自动换行效果

<html><body>
<style>
.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;
}</style>
<div class="contentT">
<ul>
<li>北京</li>
<li>广东</li>
<li>上海</li>
<li>山东</li>
<li>江苏</li>
<li>四川</li>
<li>浙江</li>
<li>河南</li>
<li>辽宁</li>
<li>陕西</li>
<li>湖北</li>
<li>湖南</li>
<li>福建</li>
<li>重庆</li>
<li>安徽</li>
<li>河北</li>
<li>山西</li>
<li>广西</li>
<li>江西</li>
<li>甘肃</li>
<li>天津</li>
<li>贵州</li>
<li>吉林</li>
<li>海南</li>
<li>云南</li>
<li>新疆</li>
<li>宁夏</li>
<li>青海</li>
<li>西藏</li>
<li>黑龙江</li>
<li>内蒙古</li>
</ul>
</div></html></body>

抱歉!评论已关闭.