我制作了一个 Accordion ,我想在其中显示一些图片,但我希望它们排成一行,就像一行,现在它们是垂直显示的,我希望它们水平显示,我尝试了很多东西我用谷歌搜索但无法得到我的答案。
这是我的 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});
});
最佳答案
对不起,如果我造成了一些困惑,我所要做的就是添加
white-space: nowrap;
到我的 CSS 代码,所以它看起来像这样。
#accordion{
width: 700px;
white-space: nowrap;
}
我只是为 future 可能想要做类似事情的人添加这个答案。
@Pangloss 回答了这个问题
关于javascript - 如何在线显示 Accordion 元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34699996/