ページネーションスタイルのCSS、HTML

Question

私はこのような改ページを作成すると問題があります

：

私が持っているもの：jsfiddle

.pager-wrapper { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #dddddd; 
 
} 
 
li { 
 
    float: left; 
 
    border-top: solid 3px black; 
 
} 
 
a.mylink { 
 
    display: block; 
 
    padding: 8px 30px; 
 
} 
 
.mylink:hover { 
 
    border-top: solid 3px yellow; 
 
} 
 
.myactive { 
 
    border-top: solid 3px yellow; 
 
}

<ul id="pager-container" class="pager-wrapper" tag="div"> 
 
    <li class="mypre"> 
 
    <a class="mylink" href="" data-page="0">«</a> 
 
    </li> 
 
    <li> 
 
    <a class="mylink" href="" data-page="0">1</a> 
 
    </li> 
 
    <li class="myactive"> 
 
    <a class="mylink" href="" data-page="1">2</a> 
 
    </li> 
 
    <li class="mynext"> 
 
    <span><a class="mylink" href="" data-page="1">»</a></span> 
 
    </li> 
 
</ul>

まず問題：それは上でなければなりません全幅のページが、私はそれを行う方法を知らない。

第二の問題：.mylink:hoverは.myactive

と同じあなたは私の問題で私を助けることができるはずですか？ホバー：

Answer 1

ディスプレイでこのフィドルを確認してください。

.pager-wrapper { 
    list-style-type: none; 
margin: 0; 
padding: 0; 
overflow: hidden; 
background-color: #dddddd; 
display: flex; 
} 

li { 
    flex: auto; 
    border-top: solid 3px black; 

} 

https://jsfiddle.net/18jg97vu/2/

Answer 2

1.（。後で、この答えを更新する場合があります）

2.問題は、あなたが.mylinkする完全に独立した境界線を持つ親李、上.myactive持っている、です。これが外観と奇妙な動作の違いを引き起こす原因です。

.myactiveクラスをli内のリンクに移動するだけで、期待通りに動作するはずです。このように：

<li> 
    <a class="mylink myactive" href="" data-page="1">2</a> 
</li> 

デモ：jsFiddle