php - 附加没有默认 "next line"填充的 img

Question

我已经查看了相关问题(和答案)，因此我尽量在网站上保留重复内容。

问题来了；我正在做一个小图像 slider ，它使用 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;
}

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