在没有默认的"下一行"填充 - Append img without default "next line" padding

Append img without default "next line" padding

本文关键字：quot 一行填充默认 | 更新日期: 2023-09-27

我已经回顾了相关的问题(和答案)，所以我尽量避免重复。

问题来了;我正在做一个小图像滑块，它使用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元素，我如何摆脱在不同行的图像之间的间距?或者，简单地附加图像，以便根据浏览器它们都在同一行?

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

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

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

试试:

.imgScroll { display: inline-block; }