Использование jQuery для добавления прокрутки в плоский список UL

Question

У меня есть этот список UL:

<ul class="third-level-nav">
  <li><a href="/accommodations/Home.aspx">Home</a></li>
  <li><a href="/accommodations/Household-Ordering-Tutorial.aspx">
       Household Ordering Tutorial
      </a>
  </li>
  <li><a href="/accommodations/List-of-standard-items.aspx">
       List of standard items
      </a>
  </li>
  <li>
     <a href="/accommodations/Costs-of-utilities.aspx">
      Costs of utilities
     </a>
  </li>
</ul>

На странице он отображается в виде плоского списка (слева направо, стиль списка: нет):

Home | Household Ordering Tutorial | List of standard items | Costs of utilities

Проблема в том, что может быть дюжина или больше этих предметов LI, и они переходят на следующую строку.Есть ли способ использовать jQuery, чтобы сделать список прокручиваемым?Другими словами, будет ли отображаться >, если есть еще элементы, и <, когда пользователь прокручивает некоторые элементы вне поля зрения?Было бы плавно прокручивать влево и вправо.

Спасибо.

Answer 1

Вы можете сделать это без jQuery или JavaScript. Попробуйте этот CSS вместо использования float:

LI {
    display:inline-block; 
    list-style:none;
}
UL {
    white-space: nowrap;
}

http://jsfiddle.net/mblase75/HhecV/

Это не сделает список прокручиваемым, но сделает всю страницу прокручиваемой. Чтобы прокрутить список по горизонтали, добавьте overflow:auto:

LI {
    display:inline-block;
    list-style:none;
}
UL {
    white-space: nowrap;
    overflow: auto;
}

http://jsfiddle.net/mblase75/HhecV/2/