여분의 공간이있는 페이지 매기기

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라는 글꼴을 사용합니다.

어쨌든 두 글꼴 모두 상충되는 선 높이와 패딩이 서로 충돌하여 서로 잘 어울리게 만들 수 없습니다.

이전 및 다음 링크와 페이지 번호는 동일한 pagenumbers 클래스가 할당되어 있습니다. 이것은 생성 된 코드이기 때문에 변경할 수 없습니다.

그래서 문제를 해결 한 Oswald 글꼴을 제거했습니다 ... 불행히도 글꼴이 달라 지길 원했기 때문에 시각적으로 사용할 수있는 다른 옵션에 대해 생각하고있었습니다.

이전 및 다음 링크 옆에 화살표가 있습니다. 그 화살은 절대적으로 배치되었으므로 아무런 선 높이 문제도 적용되지 않습니다.

내가 생각하기에 끝난 후에 나는 화살 전용으로 가기로 결정했다!

이제 정렬이 고정되어 있으며 어떤 일이 일어 났는지 이해합니다.

html로는 변경되지 않습니다 :

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

내가이 문제를 해결 한 수있는 다른 방법이 있습니다 :

<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의는 것 같습니다. 너비를 지정하고 이전 위치와 다음 링크를 절대적으로 배치 할 수 있었고 절대 위치 지정 때문에이 문제를 해결할 수도있었습니다.

그러나이 솔루션은 마음에 듭니다. 이전 및 다음 링크를 추측하지 않고 아이콘을 표시하는 것이 좋습니다 (각각의 방향을 가리킴).

감사합니다.
Josh