目的很简单:有一个 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的长度.

相关文章:

  • 2022-12-23
  • 2022-02-21
  • 2022-01-09
  • 2022-12-23
  • 2022-01-18
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2021-11-17
  • 2022-01-25
  • 2021-12-04
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案