Na minha estrutura, eu quero que seja responsiva a página selecionada sempre fique visível, se possível no meio a classe dela e a "ativa", e as demais opções fiquem ocultas, podendo aparecer se a largura da página for aumentada
.paginacao {
max-width: 870px;
overflow: hidden;
width: 100%;
margin: 0px;
display: inline-flex;
height: 52px;
}
.paginacao * {
list-style: none;
text-decoration: none;
}
.paginacao ul {
margin: 0px;
display: inline-flex;
padding: 0px;
width: calc(100% - 118px);
}
.inicio,
.fim {
background: dodgerblue;
color: #fff;
}
.inicio a,
.fim a {
color: #fff;
}
.paginacao li {
font-family: Trebuchet MS, arial;
font-size: 18px;
text-decoration: none;
border-radius: 3px;
text-align: center;
height: 20px;
min-width: 20px;
margin: 2.5px;
padding: 12.5px;
box-shadow: 2px 0px 5px 2px rgba(0, 0, 0, 0.15);
cursor: pointer;
}
.paginacao ul li a {
color: #222;
}
.paginacao ul li.ativo a {
color: dodgerblue;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<center class="paginacao">
<li class="inicio">
<a href="#">
<<</a>
</li>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li class="ativo"><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li><a href="#">11</a></li>
<li><a href="#">12</a></li>
<li><a href="#">13</a></li>
<li><a href="#">14</a></li>
<li><a href="#">15</a></li>
</ul>
<li class="fim"><a href="#">>></a></li>
</center>