[英]How to display accordion items in line?
我做了一个手风琴,我想在其中显示一些图片,但我希望它们排成一行,就像一排,现在它们垂直显示我希望它们水平显示,我尝试了很多东西,我用谷歌搜索但无法得到我的答案。
继承我的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;
}
我只是为将来可能想要做类似事情的人添加这个答案。
@Pangloss回答了这个问题
用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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.