如何防止图像/块被包裹？

Question

我正在尝试显示一系列图像.它有点像旋转木马,除了使用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.我尝试了无包装,但这仅适用于文本.

任何的想法？

Answer 1

ul {
  white-space: nowrap;
}

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

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