css - 分页具有额外的空间

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

URL是：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;
}

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

我忘记提到的一件事是，当字体相同时，一切都可以正常工作-我猜是大小差异引起了一些问题。

谢谢，
乔希

最佳答案

因此，在进一步调查此问题之后，我的问题是由我使用的其他Google Web字体创建的。

页码使用一种叫做Lato的字体，而上一个和下一个链接则使用一种叫做Oswald的字体。

某种程度上，这两种字体的行高和内边距是冲突的，我无法让它们相互之间很好地玩耍。

上一个和下一个链接以及页码均分配了相同的页码类。因为这是生成的代码，所以我无法更改。

因此，我删除了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;
}

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

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

谢谢，
乔希

关于css - 分页具有额外的空间，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48030365/