当前位置: 代码迷 >> Web前端 >> 设立<li>让页面同时显示两列
  详细解决方案

设立<li>让页面同时显示两列

热度:443   发布时间:2012-10-08 19:54:56.0
设置<li>让页面同时显示两列

今天在做网站的时候有一个小模块的布局问题,然我头疼了半天,不过最后还是解决了,我想显示的效果如下图所示 :

?

下面举个例子来说明是怎么实现的:

<!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>

?这个希望在以后的使用中能够用到。

  相关解决方案