如何防止图像/块包装？ [英] How to prevent images/blocks from wrapping?

问题描述

我想要一个显示为horizo​​ntaly的图像列表。它就像一个轮播，除了不使用jquery和动画我只有一个滚动条

I'm trying to have a list of images displayed horizontaly. It's kind of like a carousel except instead of using jquery and animations I'd just have a scrollbar

<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}

b $ b

这里的问题是，我必须定义UL标签的宽度，因为如果我不是图像将去下一行，我要得到一个Y滚动，我不' t。

The problem here is that I have to define the width of the UL tag because if I don't the images are going to go the next line and I'm going to get an Y scroll that I don't want.

我无法使用jQuery。

I can't use jQuery. I tried no-wrap, but this only works for text.

任何想法？

推荐答案

ul {
  white-space: nowrap;
}

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

适用于我的FF3.6，但没有在其他地方试过。此外， ul 的内容必须是内联元素（或对此类元素）。

Works in my FF3.6, but haven't tried it elsewhere. Also, the content of the ul must all be inline elements (or made to such).

这篇关于如何防止图像/块包装？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！