Горизонтально прокручиваемый список изображений

Я пытаюсь создать список прокрутки по горизонтали. Я собираюсь заменить эту причудливую версию, когда включен Javascript, но я хочу, чтобы разметка и css выглядели и отлично работали без Javascript на достаточно современных браузерах (любые предложения, которые используют Javascript, отключены).

Моя текущая разметка /css работает, но вот что мне не нравится в ней:

  • В текущей разметке указывается очень широкий ul (т.е. 10000px) и контейнер, который прокручивает это. Есть ли способ избежать этого и вместо этого ширина расширяется в зависимости от его содержимого (т.е. Синий фон не должен быть там)?
  • Есть два посторонних div (с идентификатором #extra1, #extra2), который предназначен только для стилизации. Есть ли способ устранить этот дополнительный div?
  • Если для заполнения ширины страницы недостаточно изображения, полоса прокрутки должна свернуть, но в настоящее время она не работает, потому что у меня очень широкая ul, которая не может свернуть.
  • Тег <a> разделяется горизонтальным списком, желательно сохранить их вместе. Есть ли способ связать их друг с другом и четко отделить их в CSS?

Кроме того, знаете ли вы о каких-либо учебниках, которые обсуждали такие вещи? Я видел несколько руководств, которые демонстрировали, что прокручивается вся страница, и я взял некоторые идеи от них, но я не могу найти ни одного показанного прокручиваемого элемента ul/ol.

Дополнительная информация, которая может помочь:

  • Ширина страницы статична (т.е. это не жидкость/эластичная макет).
  • Изображения на странице динамически генерируются из PHP, и количество изображений может измениться.
  • Ширина эскизов четко определена.

Вырезанный живой пример: http://dl.dropbox.com/u/17261360/horiz.html

Ответы

Ответ 1

Это работает для меня, протестированного в Firefox 4 beta 10, было бы целесообразно протестировать его и в IE:

<ul class="images">
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>

Трюк в CSS состоит в том, чтобы установить li в display:inline, поэтому они рассматриваются как символы и помещаются рядом друг с другом и устанавливают white-space:nowrap на ul, чтобы не было прерывания строки, Прокрутка тогда просто overflow-x:auto, а остальное очевидно:

ul.images {
  margin: 0;
  padding: 0;
  white-space: nowrap;
  width: 900px;
  overflow-x: auto;
  background-color: #ddd;
}
ul.images li {
  display: inline;
  width: 150px;
  height: 150px;
}

Здесь показан живой пример

Добавление кнопок prev/next можно выполнить с помощью position:absolute или с помощью float:left или любого другого метода, который вам нравится.