今天在做网站的时候有一个小模块的布局问题,然我头疼了半天,不过最后还是解决了,我想显示的效果如下图所示 :
?
下面举个例子来说明是怎么实现的:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>LI列表自动排成两列显示</title> <style type="text/css"> <!-- body {font:12px/1.5em "Lucida Grande", Verdana, sans-serif; } #list {width: 600px;float:left; list-style:disc outside; color:#000; } #list li {float:left;} #list li a{display:block;float:left; width: 300px; } --> </style> </head> <body> <ul id="list"> <li><a href="http://songjindian.iteye.com" target="_blank">《Java2核心技术卷2:高级特性》第7版中文高清 PDF</a></li><li><a href="http://songjindian.iteye.com" target="_blank">ASP结合Ajax实现草稿自动保存系统</a></li> <li><a href="http://songjindian.iteye.com" target="_blank">jQuery 多项选择功能的表格</a></li> <li><a href="http://songjindian.iteye.com" target="_blank">带后台管理的ASP+jS动感相册</a></li> <li><a href="http://songjindian.iteye.com" target="_blank">基于JavaScript的Tween算法及曲线特效</a></li> <li><a href="http://songjindian.iteye.com" target="_blank">C#编程获取局域网IP及网卡MAC地址</a></li> <li><a href="http://songjindian.iteye.com" target="_blank">Asp生成静态HTML完整实例(包括列表分页)</a></li> <li><a href="http://songjindian.iteye.com" target="_blank">信友拼客(圈子交友)程序 v2.1</a></li> <li><a href="http://songjindian.iteye.com" target="_blank">JavaScript开发的拼音输入法[精品]</a></li> <li><a href="http://songjindian.iteye.com" target="_blank">ASP+AJAX无刷新评论提交</a></li> </ul> </body> </html>
?这个希望在以后的使用中能够用到。