Javascript 无溢出的可滚动水平ul

我有一份这样的清单

<ul class="pagination">
   <li class="disabled"><a href="#!"><i class="material-icons">chevron_left</i></a></li>
   <li class="active"><a href="#!" rel="1">1</a></li>
   <li class="waves-effect"><a href="#!" rel="2">2</a></li>
   <li class="waves-effect"><a href="#!" rel="3">3</a></li>
   <li class="waves-effect"><a href="#!" rel="4">4</a></li>
   <li class="waves-effect"><a href="#!" rel="5">5</a></li>
   <li class="waves-effect"><a href="#!" rel="6">6</a></li>
   <li class="waves-effect"><a href="#!" rel="7">7</a></li>
   <li class="waves-effect"><a href="#!"><i class="material-icons">chevron_right</i></a></li>
</ul>

我有滚动条，但我不能滚动这个元素，因为有足够的地方显示所有显示的项目

目标是当我滚动ul元素时，我可以显示隐藏的其他元素

示例：

<ul class="pagination">
   <li class="disabled"><a href="#!"><i class="material-icons">chevron_left</i></a></li>
   <li class="active"><a href="#!" rel="1">1</a></li>
   <li class="waves-effect"><a href="#!" rel="2">2</a></li>
   <li class="waves-effect" style="display: none;"><a href="#!" rel="3">3</a></li>
   <li class="waves-effect" style="display: none;"><a href="#!" rel="4">4</a></li>
   <li class="waves-effect"><a href="#!" rel="5">...</a></li>
   <li class="waves-effect" style="display: none;"><a href="#!" rel="6">6</a></li>
   <li class="waves-effect"><a href="#!" rel="7">7</a></li>
   <li class="waves-effect"><a href="#!"><i class="material-icons">chevron_right</i></a></li>
</ul>

**JSFiddle：**

---

希望这有助于

.pagination{
溢出-x：自动；
最大高度：35px；
}

您可以使用

溢出：auto

，因此只有当内容大于父元素时才会显示滚动条

.pagination{
宽度：100px；
边框：1px纯黑；
溢出-x：自动；
空白：nowrap；
}
李{
显示：内联块；
}

能否请您创建一个示例，以便我们看到实际问题。不要使用

滚动

这意味着该条始终存在，请尝试使用

自动

<ul class="pagination">
   <li class="disabled"><a href="#!"><i class="material-icons">chevron_left</i></a></li>
   <li class="active"><a href="#!" rel="1">1</a></li>
   <li class="waves-effect"><a href="#!" rel="2">2</a></li>
   <li class="waves-effect" style="display: none;"><a href="#!" rel="3">3</a></li>
   <li class="waves-effect" style="display: none;"><a href="#!" rel="4">4</a></li>
   <li class="waves-effect"><a href="#!" rel="5">...</a></li>
   <li class="waves-effect" style="display: none;"><a href="#!" rel="6">6</a></li>
   <li class="waves-effect"><a href="#!" rel="7">7</a></li>
   <li class="waves-effect"><a href="#!"><i class="material-icons">chevron_right</i></a></li>
</ul>