Как предотвратить обертывание изображений / блоков?

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 должно быть встроенным элементом (или выполнено таковым).

Answer 2

Просто замените

li {float:left}

с

li {display:inline}

Answer 3

Определение ширины - единственная опция, предотвращающая перенос элементов li. Поверьте мне, я использовал много часов с той же проблемой, и я был бы удивлен, если кто-нибудь может придумать что-нибудь лучше:)

Если вы не можете использовать JavaScript, возможно, вы сможете рассчитать ширину на стороне сервера?

Answer 4

Старайтесь вообще не использовать структуру ul / li, а просто размещайте изображения одно за другим, это должно работать.