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>

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

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/

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

1 个答案: