如何在一行中显示手风琴项目

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>