使用jQuery将滚动添加到平面UL列表

我有一份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>

它在页面上显示为一个平面列表（LI向左浮动，列表样式：无）：

Home |家庭订购教程|标准物品清单|水电费

---

问题是，这些LI项目可能有十几个或更多，它们将打包到下一行。有没有办法使用jQuery使列表可滚动？换句话说，如果有更多的项，它将显示一个

，而一个

您可以在没有jQuery或JavaScript的情况下执行此操作。请尝试使用此CSS，而不是使用
float
：

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


这不会使列表可滚动，但会使整个页面可滚动。要使列表水平滚动，请添加
overflow:auto
：

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

谢谢，mblase75。尽管您的答案很好，但我仍然在寻找一个没有滚动条的酷jQuery解决方案，滚动条是滚动元素的一部分。我希望有一些箭头可以让用户单击在元素之间移动。我希望为LI元素实现一种类似于此的滑动技术：