Question

我已经回顾了相关问题（和答案），所以我试图在网站上保留一份副本。

这是问题所在;我正在做一个小图像滑块，使用php首先拍摄目录中的所有图像，并吐出7个：

<div id="imageScroller">
<div id="wide">
<?php
    $images = scandir("folder/folder/folder");
    for($i = 2; $i < 10; $i++){
        echo "<img src='folder/folder/folder/" . $images[$i] . "' name='" . $i . "' class='imgScroll'>";
    }
?>
</div>
</div>

然后它将$images数组和计数器$i传递给Javascript：

var images = new Array();
images = <?php echo json_encode($images); ?>;
var i = <?php echo json_encode($i); ?>;

setInterval用于重复功能并将图像设置为左侧动画，附加新图像并在每次传递时删除第一张图像：

setInterval("newImg()", 3000);
function newImg(){
    if(i == images.length){
        i = 2; //The PHP array returns the first two folders as [0] => ., [1] => ..
    }
    $("#wide").children().first().animate({'marginLeft': '-93px'}, 3000, function(){
    $("#wide").append("<img src='folder/folder/folder/" + images[i] + "' name='" + i + "' class='imgScroll'>\n").children().first().remove();
    i++;
    });
}

还有一些CSS摘录摘录：

        #imageScroller{
            width: 100%;
            height: 114px;
            width: 651px;
            overflow: hidden;
            border: 1px solid gray;
            padding: 0;
        }
        #wide{
            width: 837px;
        }
        .imgScroll{
            padding-left: 5px;
            padding-right: 5px;
            height: 114px;
            width: 83px;
            margin: 0;
            border: 0;
        }

所以我的问题是，因为我在不同时间创建img元素，如何摆脱不同行上图像之间的间距？或者，简单来说，附加图像，以便根据浏览器，它们都在同一条线上？

Answer 1

尝试将line-height和font-size设置为0：

#wide {
    width: 837px;
    line-height: 0;
    font-size: 0;
}

这是处理内联元素时最简单的方法。

Answer 2

试着去：

.imgScroll { display: inline-block; }

在没有默认“下一行”填充的情况下附加img

2 个答案: