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

【问题标题】：Append img without default "next line" padding在没有默认“下一行”填充的情况下附加 img
【发布时间】：2013-02-16 18:53:02
【问题描述】：

我已经查看了相关问题（和答案），因此我试图在网站上保留一份副本。

这就是问题所在；我正在做一个小图像滑块，它使用 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 元素，如何消除不同行上的图像之间的间距？ 或者，简单地说，附加图像，以便根据浏览器它们都在同一行？

【问题讨论】：

填充顶部和底部设置为 0 ?
左边和右边的填充是混乱的。
我想你想要 display: inline;

标签： php jquery css image dom

【解决方案1】：

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

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

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

【讨论】：

工作就像一个魅力。你太棒了！

【解决方案2】：

试试看：

.imgScroll { display: inline-block; }

【讨论】：