Question

我有一个类似的列表

<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>

如果我的列表太长，而不是使用两行＆＃39;显示我用＆＃39; ...＆＃39;替换一些项目而我隐藏了一些其他的。我希望能够滚动ul元素。但是，如果我设置

overflow-x: scroll;

我有滚动条，但我无法滚动此元素，因为有足够的空间显示所有显示的项目。

目标是当我滚动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：** https://jsfiddle.net/10am4rqh/

Answer 1

希望这有助于......

＆＃13;

.pagination {
    overflow-x: auto;
    max-height: 35px;
  }

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用overflow: auto，只有当内容大于父元素时才会显示滚动条。

＆＃13;

.pagination {
  width: 100px;
  border: 1px solid black;
  overflow-x: auto;
  white-space: nowrap;
}
li {
  display: inline-block;
}

＆＃13;

<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>

＆＃13;

可滚动的水平ul没有溢出

2 个答案: