如何在線顯示手風琴項目？

Question

我做了一個手風琴，我想在其中顯示一些圖片，但我希望它們排成一行，就像一排，現在它們垂直顯示我希望它們水平顯示，我嘗試了很多東西，我用谷歌搜索但無法得到我的答案。

繼承我的HTML代碼。

<div id="accordion">
   <h3 class="FirstItem">Christmass trees </h3>
   <div class="SecondItem">

   <img  src="Pics/Products/Trees/Xtree1.jpg" />
   <img  src="Pics/Products/Trees/Xtree2.jpg" />
   <img  src="Pics/Products/Trees/Xtree3.jpg" />
   <img  src="Pics/Products/Trees/Xtree4.jpg" />
   <img  src="Pics/Products/Trees/Xtree5.jpg" />
   <img  src="Pics/Products/Trees/Xtree6.jpg" />
   <img  src="Pics/Products/Trees/Xtree7.jpg" />
   <img  src="Pics/Products/Trees/Xtree8.jpg" />
   <img  src="Pics/Products/Trees/Xtree9.jpg" />
   <img  src="Pics/Products/Trees/Xtree10.jpg" />

   </div>
</div>

CSS代碼： -

 #accordion{
    width: 700px;

}
#accordion .FirstItem{
    background: url("../Pics/WhiteBack.jpg")repeat 0 0;
    color: #808080 ;
}
#accordion .SecondItem{
    background: url("../Pics/WhiteStars.jpg")repeat 0 0;
    height: 200px;
}

JS代碼，如果你需要它。

$(function(){
   $("#accordion").accordion({collapsible: true, active: false});
});

Answer 1

對不起，如果我引起一些混亂，我所要做的就是添加

white-space: nowrap; 我的CSS代碼所以看起來像這樣。

#accordion{
    width: 700px;
    white-space: nowrap;
}

我只是為將來可能想要做類似事情的人添加這個答案。

@Pangloss回答了這個問題

Answer 2

用ul，li。

 li{ display:inline-block; } 

 <ul> <li><img src=""/></li> <li><img src=""/></li> <li><img src=""/></li> <li><img src=""/></li> <li><img src=""/></li> <li><img src=""/></li> <li><img src=""/></li> </ul>