html图片浮动之间距离,[转载]【Css技巧】Li列表中放入图片在浮动情况下出来的间距!...

Li列表中放入图片，并且如果图片在浮动的情况下出来在IE6下会使LI之间产生2个像素的间距，即使为LI设置 padding:0;

margin:0;也是一样的。如果图片不浮动，那么LI也就不会有2个像素的间距了。bug如下图:

1、样式如下:

.box{ width:581px; height:280px; clear:both; padding:0px;

margin:0px; overflow:hidden;}

.switch_big{float:left; list-style:none; width:366px; height:276px;

border:1px solid #FDA6C2; padding:1px;}

.switch_big li{display:none; width:368px; height:278px;}

.switch_big li.selected{display:block;}

.switch_big li a{display:block;}

.switch_big li img{border:none; width:366px; height:276px;}

.switch_menu{float:right; list-style:none; width:209px;

height:280px;}

.switch_menu li{ width:209px; height:64px;

background:url(../images/menu_bg1.jpg) no-repeat 8px 0;

padding-left:12px; margin-bottom:8px;}

.switch_menu li.selected{width:209px; height:64px;

background:url(../images/menu_bg2.jpg) no-repeat 0 0;}

.switch_menu li .menu_outer{width:190px; height:56px; clear:both;

padding-top:4px;}

.switch_menu li img{display:block; float:left; width:82px;

height:56px;}

.switch_menu li h3{ float:right; width:97px; height:55px;

overflow:hidden;}

*{margin:0;padding:0;font-size:12px;font-family:宋体,Arial,sans-serif;}

a{text-decoration:none;}

a img{border:none;}

ul,ol{list-style-type:none; padding:0px; margin:0px;}

.clear{clear:both;height:0px;overflow:hidden;}

2、结构如下：

class="switch_big">

class="selected">

href="#">

alt="玩命快递3》最新动作大片" src="images/01.jpg"/>

href="#">

src="images/02.jpg"/>

href="#">

src="images/03.jpg"/>

href="#">

alt="贫民富翁》金球奖大赢家" src="images/04.jpg"/>

class="switch_menu">

class="menu_outer">

src="images/r1.jpg">

斯坦森与斗

class="menu_outer">

src="images/r2.jpg">

《疯狂的赛车》比石头更疯狂

class="menu_outer">

《喜羊羊与灰太狼》3天3千万

class="menu_outer">

src="images/r4.jpg">

《贫民富翁》金球奖大赢家

这种布局就会出现在上述问题。

解决方案：

1、如果对图片不浮动，那也是一种方案。但是不是最好的。

2、其实如果看Sina和网易的页面代码的话。大家也许会发现在有好多新闻列表中的li即使是竖着排版的情况下。它也对li加入样式{float:left;}外面设置宽度使之达到竖着排版效果。可能就是这个原因吧!