带有额外空间的分页

Question

我在 div 中有一些分页，并且看到了一些额外的空间。我不确定它来自哪里。多余的空间是绿色的（我为容器添加了背景）。

网址是：http://joshrodg.com/test/inductees/page/2/

基本上，在页面底部，您会看到分页。代码已生成，因此我无法更改。我很确定这与 css 增加了额外的空间有关。

我可以在wrap 上设置一个高度，多余的空间就会消失，但这是作弊。

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 {
    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;
}

我知道这可能是我忽略的一些简单的事情。如果有人能指出我正确的方向，我将不胜感激！

我忘记提及的一件事是，当字体相同时，一切正常 - 我猜是大小差异导致了一些问题。

谢谢，
乔什

Answer 1

因此，在进一步调查此问题后，我的问题是由我使用的不同 Google 网络字体造成的。

页码使用 Lato 字体，Previous 和 Next 链接使用 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;
}

还有其他方法可以解决这个问题。我可以指定一个宽度并绝对定位我的上一个和下一个链接，由于绝对定位，这也可以解决这个问题。

但是，我喜欢这个解决方案，并认为最好不要推断出上一个和下一个链接，只显示图标（指向它们各自的方向）。

谢谢，
乔什