div+css html列表

1） 列表前有图标
ul为无序列表，ol为有序列表。如果将列表前改成图片，实现如下：
#layout ul { list-style: none;}//layout为div的id
#layout ul li { background:url(/upload/2010-08/17/icon.gif) no-repeat 0px 4px;padding-left: 20px; }
2） 横向图文列表：如qq的相册
body { margin:0 auto;font-size:12px; font-family:Verdana; line-height:1.5;}
ul,dl,dt,dd,h1,h2,h3,h4,h5,h6,form{ padding:0; margin:0;}
ul { list-style:none;}
img { border:0px;}
a { color:#05a; text-decoration:none;}
a:hover { color:#f00;}
#layout ul li { width:72px;float:left; margin:20px 0 0px 20px; display:inline;text-align:center;}
#layout ul li a {display:block;}
#layout ul li a img {padding:1px; border:1px solid #e1e1e1; margin-bottom:3px;}
#layout ul li a:hover img {padding:0px; border:2px solid #f98510;}
 
<divid="layout">
<ul>
<li><ahref="#"><img src="c.gif" width="68"height="54"/>三亚</a></li>
<li><ahref="#"><img src="p.gif" width="68"height="54" />三亚</a></li>
</ul>
</div>
    此时父容器的高度没有被子元素的高度而撑高，为解决此问题，让高度自适应overflow:auto；zoom：1是为了解决IE6不兼容的问题。