Scrollbare horizontal ul ohne Überlauf

Question

Ich habe eine Liste, wie die

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

Wenn meine Liste zu lang ist, statt zwei ‚Linien‘ ich mit ersetzen, indem einige Elemente angezeigt werden ‚...‘ und ich verstecken manch andere. Ich möchte in der Lage sein, auf dem ul Element zu scrollen. Aber wenn ich gesetzt

overflow-x: scroll; 

Ich habe die Scrollbar, aber ich kann auf diesem Element nicht bewegen, weil es genug Platz ist, um alle angezeigten Elemente anzuzeigen.

Das Ziel ist, dass wenn ich auf dem ul Element blättern kann ich einige andere Elemente anzeigen kann, die sich verstecken.

Beispiel:

<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

hier hoffe, das hilft ...

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

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

Answer 2

Sie können overflow: auto verwenden, sodass die Bildlaufleiste nur angezeigt wird, wenn der Inhalt größer als das übergeordnete Element ist.

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

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