css li图像排列跳跃位置

Question

当我在<ul>上分配时，我的css img有问题可以有人告诉我它发生了什么吗？

CSS

<style>
.contain {
    width: 740px;
    height: auto;
    margin-top: 10px;
}
.contain ul li img {
    border: 1px solid #999;
    width: 127px;
    height: 180px;
}
.contain ul li {
    float:left;
    text-decoration: none;
    list-style-type: none;
    margin-top: 15px;
    margin-right: 8px;
    margin-bottom: 15px;
    margin-left: 7px;
    display: block;
}
</style>

HTML

<div class="contain">
    <ul>
       <li><img name="Name" src="img/a.jpg" width="127" height="180" alt=\"imgName"></li>
        <li><img name="Name" src="img/a.jpg" width="127" height="180" alt=\"imgName"></li>
        <li><img name="Name" src="img/a.jpg" width="127" height="180" alt=\"imgName"></li>
        <li><img name="Name" src="img/a.jpg" width="127" height="180" alt=\"imgName"></li>
        <li><img name="Name" src="img/a.jpg" width="127" height="180" alt=\"imgName"></li>
        <li><img name="Name" src="img/a.jpg" width="127" height="180" alt=\"imgName"></li>
        <li><img name="Name" src="img/a.jpg" width="127" height="180" alt=\"imgName"></li>
        <li><img name="Name" src="img/a.jpg" width="127" height="180" alt=\"imgName"></li>
        <li><img name="Name" src="img/a.jpg" width="127" height="180" alt=\"imgName"></li>       
        <li><img name="Name" src="img/a.jpg" width="127" height="180" alt=\"imgName"></li>               
    </ul>

但img输出如下：

正如你在第二行看到的那样，左边是一个图像，第三行img肯定有4个，所以为什么图像不是按2行排列的5个图像？

Answer 1

输出就是这样，因为你的边距，特别是左边和右边......删除它们。http://fiddle.jshell.net/55gFU/1/