Sep 20

用UL/LI进行多列显示 不指定

kcao , 12:23 , 技术 , 评论(0) , 引用(0) , 阅读(1005) , Via 本站原创 | |

 先定义CSS

CSS Code Copy Code To Clipboard
  1. //2列:  
  2. .list2col li{ line-height:28px;border-bottom:1px solid #EEEpadding-left:15px;font-size:14px;float:left;width: 50%;overflow:hidden;}  
  3.   
  4. //3列:  
  5. .list3col li{ line-height:28px;border-bottom:1px solid #EEEpadding-left:15px;font-size:14px;float:left;width: 33%;overflow:hidden;}  
  6.   
  7. //多列就改width=相应%  

当然也可以在HTML里直接用style="..."来实现以上CSS,然后直接就实现了:

XML/HTML Code Copy Code To Clipboard
  1. <ul class="list2col">  
  2.     <li>list1</li>  
  3.     <li>list2</li>  
  4.     <li>list3</li>  
  5.     <li>list4</li>  
  6.     <li>list5</li>  
  7.     <li>list6</li>  
  8.     <li>list7</li>  
  9. </ul>  

 

发表评论
Please log on to continue. Thanks!
打开HTML 打开UBB 打开表情 隐藏 记住我 [登入] [注册]