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

最新推荐文章于 2022-07-15 16:43:51 发布

原创最新推荐文章于 2022-07-15 16:43:51 发布 · 900 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ASP #Ajax #jQuery #JavaScript #编程 #ViewUI

本文介绍了一种利用CSS实现列表自动排成两列的方法，通过设置浮动和宽度等属性，使得列表项能够均匀地分布在两列中。

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

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

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

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