今天在做网站的时候有一个小模块的布局问题，然我头疼了半天，不过最后还是解决了，我想显示的效果如下图所示 ：
下面举个例子来说明是怎么实现的：
<!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>
这个希望在以后的使用中能够用到。
分享到：
相关推荐
<li>1.console.log("script- 111");</li> <li>2.console.log("asynce1-111");</li> <li>3.console.log("async2-111");---然后跳出整个async1函数来执行后面js栈的代码</li> <li>4.console.log("promise1-111");...
关于<li>列表的分页及Table的分页 js实现 适用静态分页
<li><a href="#"><img src="images/ad4.jpg" thumb="" alt="" text="详细描述4" /></a></li> <li><a href="#"><img src="images/ad3.jpg" thumb="" alt="" text="详细描述5" /></a></li> </ul> </div>
<li class="active"><i>1F</i><span>服饰</span></li> <li><i>2F</i><span>美妆</span></li> <li><i>3F</i><span>手机</span></li> <li><i>4F</i><span>家电</span></li> <li><i>5F</i><span>数码</...
代码片段： ... <li> ... <a >全部问题</a> ... </li> ... <li> ... <a >经济金融</a> ... </li> ... <li> ... <a >企业管理</a> ... </li> ... <li> ... </li>
<li ><a class="a">计算机与电子信息</a> <ol class="a"> <li>数据库</li> <li>电子信息</li> <li>计算机组成与原理</li> <li>计算机基础 <ul> <li>计算机文化基础</li> <li>公共基础</li> <li>软件技术...
<ol><li>周日</li><li>周一</li><li>周二</li><li>周三</li><li>周四</li><li>周五</li><li>周六</li></ol> <ul> <li>日期</li><li>日期</li><li>日期</li><li>日期</li><li>日期</li><li>日期</li><li>日期</li> ...
<li><span>100%</span></li> <li><span>90%</span></li> <li><span>80%</span></li> <li><span>70%</span></li> <li><span>60%</span></li> <li><span>50%</span></li> <li><span>40%</span></...
<li class="current"><a >Puff</a></li> <li><a >Open</a></li> <li><a >Perspective</a></li> <li><a >Rotate</a></li> <li><a >Slide</a></li> <li><a >Tin</a></li> <li><a >Bomb</a></li> </ul> ...
<li class="blue_nav">券好赚</li> <li>京东购物</li> <li>淘宝购物券</li> <li>腾讯象棋</li> <li>绝地求生</li> <li>微信跳一跳</li> <li>答题红包</li> <li>闯关小游戏</li> </ul>
<li><a href="#">Item 1</a> <ul> <li><a href="#">Item 1.0</a> <ul> <li><a href="index.html">Item 1.0.0</a></li> </ul> </li> <li><a href="#">Item 1.1</a></li> <li><a...
代码片段： <div class="select-date-body"> <ul class="week-list"> ... <li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li> </ul> <ul class="day-tabel"></ul> </div>
;什么是列表的嵌套？;;在使用列表时，列表项中也有可能包含若干子列表项。...<li>拿铁</li> <li>摩卡</li> </ol> </li> <li>茶 <ul> <li>碧螺春</li> <li>龙井</li> </ul> </li> </ul>; CSS控制列表样式;谢谢大家
<li>a</li> <li>a</li> <li>a</li> <li>a</li> <li>a</li> </ul> </div> 我们遍历ul 下所有的li 并添加点击事件，一般我们会在for循环里面添加点击事件，但是结果和我们所期盼不一样，那么是为什么呢？？？？ 接...
<li><a href="index.html" title="个人主页" id="menu_selected"><span>个人主页</span></a></li> <li><a href="jianjie.html" title="我的简介"><span>我的简介</span></a></li> <li><a href="tongxue....
之前写了一篇周和月日历，但感觉体验不是太好，所以有重新做了一遍，加上了动画。还可以自定义显示日历里的内容。... <li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li><li>日</li>
<li><a href="#">JavaScript</a></li> <li><a href="#">JAVA</a></li> <li><a href="#">SSH</a></li> <li><a href="#">前段设计</a></li> <li><a href="#">PHP</a></li> <li><a href="#">ASP</a></li> <li><a...
<li><a href="#" target="_self">客户服务</a></li> <li>|</li> <li id="menu"><a href="#" target="_self">新手入门</a> <img src="images/arrow_down.gif" alt="arrow" /> <div id="dd_menu_top_down"> <a ...
<li><img src="images/01.jpg" alt="" id="pic1"/></li> <li><img src="images/02.jpg" alt=""/></li> <li><img src="images/03.jpg" alt=""/></li> <li><img src="images/04.jpg" alt=""/></li> <li><img src=...