css - css li 图像排列跳转位置

Question

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

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/