ul、li分列显示
目的很简单:有一个 ul>li 列表,默认为单列显示,把它变为两列显示。 方法1,使用DIV+CSS代码: <style type="text/css"> .mycode{ width:300px; height:74px; float:left;} .mycode ul{ width:280px;} .mycode li{ width:100px; float:left; display:block;} </style> <div> <ul> <li>ABC</li> <li>ABC</li> <li>ABC</li> <li>ABC</li> <li>ABC</li> <li>ABC</li> </ul> </div> 方法2,直接使用CSS控制 <style type="text/css"> .list{width:400px;overflow:hidden;zoom:1;border:1px solid #ccc} .list li{float:left;width:190px;padding:5px} </style> <ul class="list"> <li>ABC</li> <li>ABC</li> <li>ABC</li> <li>ABC</li> <li>ABC</li> <li>ABC</li> </ul>
上面的是分两列显示,
ul宽度为width:400px;
li宽度为width:190px;
如果想要分成自己想要的n列,则只需要修改ul的宽度和li的宽度,li的宽度的n倍是ul的长度.