中国设计联盟
联网
Dreamweaver Flash Photoshop 其它周边 web标准 asp php .net CSS WAP网站攻略 专题
域名注册 虚拟主机 广州网站设计 域名注册 广州网站建设 上海网站建设 虚拟主机 广州网页设计  虚拟主机 域名注册 acg王国 ACG玩家
求创科技
上海网站建设
中国福网
招聘求职
中国互联
中国设计秀
中资源
当前位置:网络学院首页 >> 设计教程 >> web标准 >> CSS解决图片下面有空隙的简单方法

CSS解决图片下面有空隙的简单方法

来源:中国设计秀    作者:    点击:78     加入收藏
    在用CSS制作网页过程中可能会碰到图片下面有空隙的问题,本文给出了最为简单的解决方法。解决方法:在图片的css中加 vertical-align:bottom; 效果


      

演示代码: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>解决图片下有空隙</title>
</head>
<body>
<style>
*{margin:0px;padding:0px;}
#l1 {float:left;background:#000;padding:20px;margin:50px;}
#l1 ul li {list-style:none;}
#l1 ul li img {vertical-align:bottom; display:block;}
</style>
<div id="l1">
   <ul>
    <li><img src="图片地址1" /></li>
    <li><img src="图片地址2" /></li>
    <li><img src="图片地址3" /></li>
    <li><img src="图片地址4" /></li>
   </ul>
</div>
</body>
</html>

0
顶一下
2007-09-25 10:20:00    出处:
网站地图 | 关于我们 | 联系我们 | 网站建设 | 广告服务 | 版权声明 | 免责声明 | 网站公告 | 友情链接 | 留言 | 旧版入口