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的字体，而上一页和下一页链接使用名为Oswald的字体。

不知何故，两种字体的线高和填充都是冲突的，我无法让它们相互配合。

Previous和Next链接以及页码都分配了相同的pagenumbers类。因为这是生成的代码，所以我无法改变。

所以，我删除了Oswald字体，修复了这个问题...不幸的是，我希望字体不同，所以我在考虑其他可视选项。

我在Previous和Next链接旁边也有一些箭头。这些箭头绝对定位，因此没有任何线高问题适用。

经过思考，我决定只使用箭头！

现在，对齐已修复，我理解发生了什么。

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

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

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

谢谢，
约什

分页与额外的空间

1 个答案: