ul li 添加一个float:left;有些距离变了

[weixin_39670158]

--------------------------body-------------------------------------
<div class="right-nav">
<div class="nav-one"><img src=""/></div><hr>
<div class="nav-two"><p>欲话毗陵君反袂，欲言夏口我沾衣。谁知临老相逢日，悲叹声多语笑稀。</p>
</div><hr><div class="nav-three"><ul class="img-list" ><li id="li"><img src="img/money.png"></li><li><img src="img/star.png"></li>
<li ><img src="img/history.png"></li></ul></div><div class="nav-down"></div></div>
-----------------------style--------------------------------------------
<style>
li{list-style:none}
.right-nav{position:fixed;right:0px;top:0px;background-color:#7AC5CD;height:100%;}
.right-nav .nav-two p{writing-mode: vertical-lr; writing-mode: tb-lr; margin:0 auto; height:9em;padding:0.5em; }
.right-nav .nav-three ul.img-list{padding:0px;}
.right-nav .nav-three ul.img-list li{display:block;text-align:center;
float:left;
/*就是这个float*/
background-color:red;width:100%;margin:0.3em 0;}
.right-nav .nav-three ul.img-list li img{height:60%;width:60%;}
</style>
------------------------------------------------------------------------------------


已经设了display:block,为什么距离会变呢？求解释。去掉float:left;可以明显看到距离变了。

[weixin_39670158]

为什么老沉。

[joinzhu]

加了float的元素会变成inline-block，这里就算加了block也不会起作用 还有你问题描述的不清楚，怎么回答？