How to display accordion items in line?

Question

I made an accordion and i want to display in it some pictures, but i want them to be in line, like a row, right now they are displayed vertically i want them to be shown horizontally, ive tried a lot of stuff and ive googled but couldn't get my answer.

heres my HTML code.

<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 code:-

 #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 code if u need it.

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

Answer 1

Im sorry if i caused a bit of confusion, all i had to do was to add

white-space: nowrap; to my CSS code so it looks like this.

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

I am just adding this answer for future people who might want to do something similar.

This question was answered @Pangloss

Answer 2

using 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>