追加IMG沒有默認「下一行」填充

我已閱讀相關問題（和答案），所以我試圖保持重複的網站。追加IMG沒有默認「下一行」填充

這是問題;我做了使用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元素，我該如何擺脫間距其間的是在不同線路上的圖像？或者，簡單地說，追加圖像，以便根據瀏覽器他們都在同一行？

來源

2013-03-02 Christopher

填充頂部和底部設置爲0？ – MimiEAM 2013-03-02 07:16:16

左側和右側的填充是messig向上的填充。 – Christopher 2013-03-02 07:18:24

我想你想顯示：內聯; – 2013-03-02 07:26:46

嘗試行高和字體大小設置爲0：

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

這是最簡單的黑客當你處理內聯元素。

來源

2013-03-02 07:24:12 dfsq

工作就像一個魅力。你真棒！ – Christopher 2013-03-02 07:38:08

嘗試去：

.imgScroll { display: inline-block; }

來源

2013-03-02 07:26:28 SaRiD

沒有工作，同樣的事情。 – Christopher 2013-03-02 07:36:13

追加IMG沒有默認「下一行」填充

回答

相關問題