博客小子:记录我们对互联网和生活的探索! 注册 | 登陆

ul和li简单语句实现DIV+CSS分两列(多列)布局显示

Tags: div, css, ul, li, 分列

显然:UL+LI在布局上比table灵活得多。

比较分两列或者多列显示:

table:你需要在服务器上写一大堆代码判断是不是需要换行,或者切分是不是准确

DIV:你只需要定义好css,剩下的做事情叫交给浏览器吧。

最简单的代码:

 

XML/HTML代码
  1. <style type="text/css">  
  2.     .mycode{ width:300px; height:74px; float:left;}   
  3.     .mycode ul{ width:280px;}   
  4.     .mycode li{ width:100px; float:left; display:block;}   
  5. </style>  
  6. <div class="mycode">  
  7.     <ul>  
  8.         <li>博客小子</li>  
  9.         <li>博客小子</li>  
  10.         <li>博客小子</li>  
  11.         <li>博客小子</li>  
  12.         <li>博客小子</li>  
  13.         <li>博客小子</li>  
  14.     </ul>  
  15. </div>  

不用多说,这个是最精简的代码,请根据你需要修改!

转载请注明来自博客小子,谢谢。

效果:

大小: 5.34 K
尺寸: 272 x 94
浏览: 124 次
点击打开新窗口浏览全图

Tags: div, css, ul, li, 分列

« 上一篇:陈冠希阿娇裸照门事件经典语录 | 下一篇:javascript刷新页面总结 »

只显示10条记录相关文章

10条你不可不知的css规则 (浏览: 1430, 评论: 0)
span元素float:right 后右对齐换行原因及其解决 (浏览: 3316, 评论: 3)
javascript获取ul中li的个数 (浏览: 3444, 评论: 3)
Javascript显示/隐藏div函数 (浏览: 2598, 评论: 0)
使用php下载css文件中的图片 (浏览: 1375, 评论: 1)
CSS布局开发参考规范 (浏览: 1402, 评论: 0)
css命名规范 (浏览: 1175, 评论: 0)
clip属性的兼容分析,构造可以输入的下拉菜单 (浏览: 1597, 评论: 0)
jquery的div,radio,checkbox,select等操作 (浏览: 4516, 评论: 0)
css中float 和列表图片list-style-image不能正常解析的说明 (浏览: 4171, 评论: 2)

Trackbacks

点击获得Trackback地址,Encode: UTF-8

1条记录访客评论

好用!!!

Post by df on 2009, September 20, 12:54 PM 引用此文发表评论 #1


发表评论

评论内容 (必填):