HTML – 如何防止图像/块被包装？

我正在尝试显示一系列图像.它有点像 carousel,除了使用jquery和动画,我只有一个滚动条

<div class="playlist-wrapper">
  <ul class="playlist">
    <li> <img src='http://blah' /></li>
    <li> <img src='http://blah' /></li>
    <li> <img src='http://blah' /></li>
    <li> <img src='http://blah' /></li>
  </ul>
</div>

.playlist-wrapper{width: 500px; overflow-x:scroll}
ul{width: 10000px;}
li{float:left}

这里的问题是我必须定义UL标签的宽度,因为如果我不这样做,那么图像将转到下一行,我将得到一个我不想要的Y卷轴.

我不能使用jQuery.我试过没有换行,但这只适用于文本.

任何的想法？

解决方法

ul {
  white-space: Nowrap;
}

li {
  display: inline;
  /* or,for 'blockness': */
  display: inline-block;
}

适用于我的FF3.6,但没有在其他地方尝试过.此外,ul的内容必须全部是内联元素(或这样做).

原文地址：https://www.jb51.cc/html/226503.html