Question

我正在尝试显示一系列图像。它有点像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。我试过没有换行，但这只适用于文本。

有什么想法吗？

Answer 1

ul {
  white-space: nowrap;
}

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

适用于我的FF3.6，但尚未在其他地方尝试过。此外，ul的内容必须全部是内联元素（或使其成为内容）。

Answer 2

定义宽度是防止li元素换行的唯一选项。相信我，我已经用了很多时间来解决同样的问题，如果有人能想出更好的东西，我会感到惊讶：）

如果你不能使用JavaScript，也许你可以计算服务器端的宽度？

Answer 3

只需替换

li {float:left}

与

li {display:inline}

Answer 4

尽量不要使用ul / li结构，只需将图像一个接一个地放置，这应该可行。

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

4 个答案: