使用jQuery将滚动添加到平面UL列表 [英] Using jQuery to add scrolling to a flat UL list

问题描述

我有这个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向左浮动，列表样式：无）：

It displays like this on the page, as a flat list (LI floated left, list-style:none):

首页|家庭订购教程|标准项目列表|公用事业的成本

问题是，可能有十几个或更多的这些LI项目，他们将包装到下一行。有没有办法使用jQuery使列表可滚动？换句话说，如果存在更多项目，则它将显示> ，并且当用户具有时，将显示< 滚动一些项目离开视图？它将平滑地左右滚动。

The problem is, there could be a dozen or more of these LI items, and they'll wrap to the next line. Is there a way to use jQuery to make the list scrollable? In other words, it would show a > if there are more items, and a < when the user has scrolled some items out of view? It would smoothly scroll left and right.

感谢。

推荐答案

。尝试此CSS，而不是使用 float ：

You can do this without jQuery or JavaScript. Try this CSS instead of using float:

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

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

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

This won't make the list scrollable, but it will make the entire page scrollable. To make just the list scroll horizontally, add overflow:auto:

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

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

这篇关于使用jQuery将滚动添加到平面UL列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！