Как бы я изменил встроенный список Zurb Foundation, чтобы фиксировать список в одну строку, допуская переполнение: прокрутка?

Question

Я использую встроенный список, как описано в документации Foundation, для отображения списка изображений.

Это работает нормально, но если список изображений превышает ширину содержащего элемента, я хочу, чтобы они оставались в одной строке и имели прокрутку переполнения: overflow: scroll,

Кажется, есть проблема с li's (содержащий изображения в моем случае) и стиль отображения: блок по умолчанию.

Как бы я изменил свой список из этого:

,,, к списку элементов в одной строке, которые я могу прокручивать по горизонтали для просмотра изображений, которые переполняют страницу?

Answer 1

Я нашел решение по

• Установка стиля родительского элемента в overflow:scroll;

• Настройка ul стиль элемента в display: inline-flex

• Затем давая liминимальная ширина в моем случае min-width:200px;

Мой точный код (используя haml в приложении rails):

%div{ id: 'type-of-position', style:'width:100%; overflow:scroll;' }
  %ul{ class: 'inline-list', style:'display: inline-flex' }
    - @employer_types.each do |tt|
      %li{ class: 'inactive', style:'min-width:200px;', id: tt.id }=image_tag tt.image.url

Я не уверен, что это самое элегантное решение, но оно сработало, чтобы выполнить то, что я пытался сделать.

Answer 2

inline-list не подходит для вашего использования. inline-list добавляет float:left на все предметы и пусть они будут. Это в общем то, что вам нужно. Но float:left сломается, когда будет достигнут конец родительского элемента. Вам нужен элемент, чтобы не сломаться. Это может быть заархивировано путем предоставления более широкого родительского элемента.

Обновите гораздо лучшее решение, которое было раньше: http://jsfiddle.net/NicoO/RRd2L/1/

Добавьте CSS следующим образом:

.inline-list.real-inline
{
    white-space: nowrap;
    overflow: auto;
}

.inline-list.real-inline  > li
{
    float: none;
    display: inline-block;
}

А затем добавьте класс "real-inline" в нужный список. Немного хакерски, но это работает... Ты наверняка найдешь лучшее имя.

- предыдущее решение (работает, но не очень хорошо): я бы предложил добавить новый класс, подобный этому:

.horizontal-scroll-pane
{
    overflow: auto;
}

.horizontal-scroll-pane ul.inline-list
{
    /* This need to be wide. */
    min-width: 2000px;
}

Имея этот HTML:

<div class="horizontal-scroll-pane">
<ul class="inline-list">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
  <li><a href="#">Link 5</a></li>
  <li>...</li>
</ul>
</div>

Вот скрипка: http://jsfiddle.net/NicoO/RRd2L/