>>1
パンくずとあんまし変わらないのでは？って思ったので
お手軽に『inline-block』で作ってみたけど
コレジャナイ感が半端ないのであくまで参考に
多分こういうアプローチで合ってると思うけど
横幅によってはぎっちぎちになったり広くなったりするんだろうから
もしかしたら別かもしれないです。無責任で申し訳ない…

/*-----------------------------------------------*/
【HTML】
##pagination##

【CSS】>
a{text-decoration:none;}
ul{text-align: center;
list-style: none;}
ul li{display: inline-block;　　/*　ulタグとliタグをinline-block化　*/
}

.pagination{　　/*<ul class="pagination">の部分*/
background: #059edc;
}
.pagination a{　　/*　<li><a></a></li>　*/
padding:10px;
color:#333;
background:#fff;
border:solid 3px #FF0000;
border-radius:.5em;
margin-left:5px;
}
.pagination a:hover{
padding:10px;
color:#fff;
background:#a0d7f5;
}

.active{　　/*　 <li><span class="active">3</span></li>　*/
font-weight:bold;
color:#fff;
background: #FF0000;
padding:10px;
border:solid 3px #FF0000;
border-radius:.5em;
margin-left:5px;
}
</style>
/*-----------------------------------------------*/

以下は自分用メモ
・フォント次第ではうまくいく？
　→等幅フォント？
・marginで無理やり左側に空間をつくる
　→.pagination a{}/.active{}
　　　　margin-left:5px;
・float
　→横並びにはなるけれど表示が×
・block
　→width×height×