浮动引起li之间有空隙的问题

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2013-10-19 10:32:57　-　阅:　-　评:0　-　积分:0

记得在前面写过一篇文章《几种实现文字居左日期居右布局的方法》，是关于新闻列表文本居左时间居右的方法，文中的方法二在ie6中存在一个bug.到底是什么bug呢？还是来看图说话吧。

在图中可以清晰的看到li与li之间有一段间隙。至于这个间隙是怎么产生的呢？笔者也没有搞明白。从手册中翻出了解决之道。那就是给li添加vertical-align:top;属性。此时让笔者联想到了前面说的《图片距下面有3px的问题》，当时解决的方法也是添加此属性，看来此属性确实很强大啊。呵呵。源码如下：

在线演示<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>浮动引起li之间有空隙的问题</title>
<meta name="author" content="艺灵设计,yilingsj@gmail.com, www.yilingsj.com" />
<style type="text/css">
*{margin:0; padding:0;}
body{font: 12px/1.5 tahoma,arial,宋体b8b\4f53;}
ul{list-style:none;}
.clear{clear:both; font-size:0;height:0;line-height:0; overflow:hidden;}
ul{width:500px; margin:0 auto}
ul li{height:30px;line-height:30px;background:#ccc; border-bottom:1px solid #f00;}
ul li span,ul li a{cursor:pointer;display:inline-block; float:left; padding:0 10px;}
ul li span{background:#666; float:right; cursor:default}
ul li a{background:#999;text-decoration:none;color:#fff}
ul li a:hover{color:#000;}
</style>
</head>
<body>
<ul>
　<li><a href="http://www.yilingsj.com/div/2013-08-04/68.html">ie6下双边距的问题</a><span>2013-08-04</span></li>
　<li><a href="http://www.yilingsj.com/div/2013-08-03/67.html">实现ie6下png图片背景透明的几种方法</a><span>2013-08-03</span></li>
　<li><a href="http://www.yilingsj.com/div/2013-08-03/65.html">实现背景半透明及解决文字半透明的方法</a><span>2013-08-02</span></li>
</ul>
</body>
</html>

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/div/2013-10-19/97.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！