Как препятствовать тому, чтобы изображения/блоки перенеслись?
Я пытаюсь иметь список изображений, отображенных горизонтально. Это отчасти похоже на кольцевую галерею кроме вместо того, чтобы использовать jQuery и анимации, у меня просто была бы полоса прокрутки
-
-
-
-
.playlist-wrapper{width: 500px; overflow-x:scroll}
ul{width: 10000px;}
li{float:left}
Проблема здесь состоит в том, что я должен определить ширину тега УЛ., потому что, если я не, изображения собираются пойти следующая строка, и я собираюсь получить прокрутку Y, которую я не хочу.
Я не могу использовать jQuery. Я попробовал без переносов, но это только работает на текст.
Какая-либо идея?
4 ответа
ul {
white-space: nowrap;
}
li {
display: inline;
/* or, for 'blockness': */
display: inline-block;
}
Работает в моем FF3.6, но в других местах не пробовал. Также, содержимое ul должно быть инлайн-элементами (или сделано таковым).
Определение ширины - единственный способ предотвратить перенос элементов li. Поверьте, я потратил много часов на решение одной и той же проблемы, и я был бы удивлен, если бы кто-нибудь мог придумать что-нибудь получше :)
Если вы не можете использовать JavaScript, возможно, вы сможете рассчитать ширину на на стороне сервера?
Просто замените
li {float:left}
на
li {display:inline}
Попробуйте вообще не использовать структуру ul/li и просто разместить изображения одно за другим, это должно сработать.