余分なスペースでページ分割

Question

divにページ分割があり、余分なスペースがあります。私はそれがどこから来ているのか分からない。余分なスペースは緑色です（コンテナの背景を追加しました）。

URLは次のとおりです。http://joshrodg.com/test/inductees/page/2/

基本的には、ページの一番下に、あなたが改ページが表示されます。コードが生成されるので、私はそれを変更することはできません。私はそれが余分なスペースを追加するCSSと何かであると確信しています。

wrapに身長を付けて余分なスペースがなくなりますが、それは不正です。

#pagi { 
    text-align: center; 
} 

#pagi .wrap { 
    background: #00ff00; 
    display: inline-block; 
    font-size: 0; 
    overflow: hidden; 
    position: relative; 
} 

#pagi .page-numbers { 
    background: #CD1F31; 
    display: inline-block; 
    color: #fff; 
    font-family: 'Lato', sans-serif; 
    font-size: 18px; 
    line-height: 40px; 
    padding: 0 10px; 
    position: relative; 
    text-decoration: none; 
    top: -2px; 
} 

#pagi .current { 
    background: #fff; 
    color: #CD1F31; 
} 

#pagi .next, 
#pagi .prev { 
    background: #054872; 
    color: #fff; 
    font-family: 'Oswald', sans-serif; 
    font-size: 20px; 
    line-height: 40px; 
    position: relative; 
    text-transform: uppercase; 
    top: 0; 
} 

#pagi .next { 
    padding: 0 35px 0 16px; 
} 

#pagi .prev { 
    padding: 0 16px 0 35px; 
} 

#pagi .left, 
#pagi .right { 
    background: #333; 
    border-bottom: 21px solid transparent; 
    border-top: 21px solid transparent; 
    height: 0; 
    position: absolute; 
    top: 0; 
    width: 0; 
} 

#pagi .left { 
    border-right: 12px solid #054872; 
    left: 0; 
} 

#pagi .right { 
    border-left: 12px solid #054872; 
    right: 0; 
} 

#pagi .ion-android-arrow-dropleft, 
#pagi .ion-android-arrow-dropright { 
    display: inline-block; 
    font-size: 30px; 
    position: absolute; 
    top: 6px; 
} 

pagi .ion-android-arrow-dropleft { 
    left: 18px; 
} 

#pagi .ion-android-arrow-dropright { 
    right: 18px; 
} 

#pagi a:hover .ion-android-arrow-dropleft, 
#pagi a:hover .ion-android-arrow-dropright { 
    color: #fff; 
} 

#pagi a:hover { 
    color: #ddd; 
} 

私は、これはおそらくオーバー探して私はという単純なものです知っている：

<div id="pagi"> 
    <div class="wrap"> 
     <a class="prev page-numbers" href="http://joshrodg.com/test/inductees/"><span class="left"></span><span class="ion-android-arrow-dropleft"></span> Prev</a> 
     <a class="page-numbers" href="http://joshrodg.com/test/inductees/">1</a> 
     <span aria-current="page" class="page-numbers current">2</span> 
     <a class="page-numbers" href="http://joshrodg.com/test/inductees/page/3/">3</a> 
     <a class="page-numbers" href="http://joshrodg.com/test/inductees/page/4/">4</a> 
     <span class="page-numbers dots">…</span> 
     <a class="page-numbers" href="http://joshrodg.com/test/inductees/page/15/">15</a> 
     <a class="next page-numbers" href="http://joshrodg.com/test/inductees/page/3/">Next <span class="ion-android-arrow-dropright"></span><span class="right"></span></a> 
    </div> 
</div> 

CSSは次のようになりますように

HTMLが見えます。誰かが正しい方向に私を指すことができたら、私はそれを感謝します！

私が言いたいことは、フォントが同じ場合はすべてうまく動作することを忘れていました。私の推測では、サイズの違いによっていくつかの問題が引き起こされています。

おかげで、
ジョシュ

Answer 1

だから、この問題をさらに調査した後、私の問題は、私が使っていた別のGoogleウェブフォントで作成されていました。

ページ番号はLatoというフォントを使用し、前と次のリンクはOswaldというフォントを使用します。

どういうわけか、両方のフォントが持っていた行の高さと詰め込みが矛盾していて、お互いにうまくやってもらえませんでした。

PreviousおよびNextリンクとページ番号の両方に同じpagenumbersクラスが割り当てられています。これは生成されたコードなので、変更できないものです。

私はOswaldフォントを削除しました。問題を修正しました...残念ながら、フォントが異なるようにしたいので、視覚的に利用できる他のオプションについて考えていました。

また、[前へ]リンクと[次へ]リンクの横に矢印があります。これらの矢印は絶対的に配置されているため、行の高さの問題は適用されません。

以上を考えた後、私は矢印だけで行くことに決めました！

アライメントは固定されており、何が起こったのか分かります。

HTMLは変わらない：

<div id="pagi"> 
    <div class="wrap"> 
     <a class="prev page-numbers" href="http://joshrodg.com/test/inductees/"><span class="left"></span><span class="ion-android-arrow-dropleft"></span> Prev</a> 
     <a class="page-numbers" href="http://joshrodg.com/test/inductees/">1</a> 
     <span aria-current="page" class="page-numbers current">2</span> 
     <a class="page-numbers" href="http://joshrodg.com/test/inductees/page/3/">3</a> 
     <a class="page-numbers" href="http://joshrodg.com/test/inductees/page/4/">4</a> 
     <span class="page-numbers dots">…</span> 
     <a class="page-numbers" href="http://joshrodg.com/test/inductees/page/15/">15</a> 
     <a class="next page-numbers" href="http://joshrodg.com/test/inductees/page/3/">Next <span class="ion-android-arrow-dropright"></span><span class="right"></span></a> 
    </div> 
</div> 

CSSは次のようになります。私はこれを修正した可能性のある他の方法があります

#pagi { 
    margin: 5px 20px 25px; 
    text-align: center; 
} 

#pagi .wrap { 
    background: #054872; 
    display: inline-block; 
    font-size: 0; 
    overflow: hidden; 
    position: relative; 
} 

#pagi .page-numbers { 
    background: #CD1F31; 
    display: inline-block; 
    color: #fff; 
    font-family: 'Lato', sans-serif; 
    font-size: 18px; 
    line-height: 40px; 
    padding: 0 10px; 
    text-decoration: none; 
} 

#pagi .current { 
    background: #fff; 
    color: #CD1F31; 
} 

#pagi .next, 
#pagi .prev { 
    color: #fff; 
    text-transform: uppercase; 
} 

#pagi .next { 
    padding: 0 25px 0 16px; 
} 

#pagi .prev { 
    padding: 0 16px 0 25px; 
} 

#pagi .left, 
#pagi .right { 
    background: #333; 
    border-bottom: 21px solid transparent; 
    border-top: 21px solid transparent; 
    height: 0; 
    position: absolute; 
    top: 0; 
    width: 0; 
} 

#pagi .left { 
    border-right: 12px solid #054872; 
    left: 0; 
} 

#pagi .right { 
    border-left: 12px solid #054872; 
    right: 0; 
} 

#pagi .ion-android-arrow-dropleft, 
#pagi .ion-android-arrow-dropright { 
    display: inline-block; 
    font-size: 30px; 
    position: absolute; 
    top: 6px; 
} 

#pagi .ion-android-arrow-dropleft { 
    left: 18px; 
} 

#pagi .ion-android-arrow-dropright { 
    right: 18px; 
} 

#pagi a:hover .ion-android-arrow-dropleft, 
#pagi a:hover .ion-android-arrow-dropright { 
    color: #fff; 
} 

#pagi a:hover { 
    color: #ddd; 
} 

。私は幅を指定することができ、前のリンクと次のリンクを絶対的に配置することができました。絶対的な位置付けのためにこの問題も修正されます。

しかし、私はこの解決策が好きであり、推測された前と次のリンクを持っておらず、アイコン（それぞれの方向を指している）を表示するほうが良いと思う。

ありがとう、
Josh