css关于div下ul、li 留白错位问题

今天才发现这个问题，div下有ul是会有错位，ul隔离div一定距离。

代码如下：

<style>
.img_change_item{
width:200px;
height:100px;
}
.img_change_list{
list-style:none;
float:left;
}
#img_change_container{
width:1000px;
}
#img_change_viewport{
width:2000px;
height:200px;
overflow:hidden;
}
</style>

<div id="img_change_viewport">
  <ul id="img_change_container">
   <li class="img_change_list"><a href="javascript:;"><img class="img_change_item" src="1.jpg"/></a></li>
   <li class="img_change_list"><a href="javascript:;"><img class="img_change_item" src="2.jpg"/></a></li>
   <li class="img_change_list"><a href="javascript:;"><img class="img_change_item" src="3.jpg"/></a></li>
   <li class="img_change_list"><a href="javascript:;"><img class="img_change_item" src="4.jpg"/></a></li>
  </ul>
  <div style="clear:left;"></div>
</div>

li横排都是使用float:left这个属性没后来发现就是因为这个原因，

首先平铺，可以对ul的style使用display:inline，而不必使用float属性。

<style>

.img_change_item{
width:200px;
height:100px;
}
.img_change_list{
list-style:none;
display:inline;
;
}
#img_change_container{
width:1000px;
display:inline;
}
#img_change_viewport{
width:2000px;
height:200px;
overflow:hidden;
}

</style>

<div id="img_change_viewport">
  <ul id="img_change_container">
   <li class="img_change_list"><a href="javascript:;"><img class="img_change_item" src="1.jpg"/></a></li>
   <li class="img_change_list"><a href="javascript:;"><img class="img_change_item" src="2.jpg"/></a></li>
   <li class="img_change_list"><a href="javascript:;"><img class="img_change_item" src="3.jpg"/></a></li>
   <li class="img_change_list"><a href="javascript:;"><img class="img_change_item" src="4.jpg"/></a></li>
  </ul>
</div>

后来发现之前的代码style里面只有加上这一句就行了

ul{ margin: 0; padding: 0px; }