2013-08-07 5 views
0

will_paginate 젬에서 제공하는 샘플 코드와 CSS를 사용하여 내 페이지에 멋지게 페이지 매기기 컨트롤을 제공하고 있습니다. 그러나 컨트롤은 가로로 정렬되지 않습니다. 대신, 모두 세로로 겹쳐서 페이지 중앙에 배치됩니다. 하나의 수평선에서 어떻게 얻을 수 있습니까? HTML은 http://mislav.uniqpath.com/will_paginate/will_paginate 페이지 매김 도구가 가로로 정렬되지 않았습니다.

:

<div class="apple_pagination"> 
    <div class="page_info"> 
    <%= page_entries_info @feeds %> 
    </div> 
    <%= will_paginate @feeds, :container => false %> 
</div> 

CSS는 다음과 같습니다 플로트와

.apple_pagination { 
    background: #f1f1f1; 
    border: 1px solid #e5e5e5; 
    text-align: center; 
    padding: 1em; 
    cursor: default; 
    li { list-style: none; } 
} 

.apple_pagination a, .apple_pagination span { 
    padding: 0.2em 0.3em; 
} 

.apple_pagination .disabled { 
    color: #aaaaaa; 
} 

.apple_pagination .current { 
    font-style: normal; 
    font-weight: bold; 
    background-color: #bebebe; 
    display: inline-block; 
    width: 1.4em; 
    height: 1.4em; 
    line-height: 1.5; 
    -moz-border-radius: 1em; 
    -webkit-border-radius: 1em; 
    border-radius: 1em; 
    text-shadow: rgba(255, 255, 255, 0.8) 1px 1px 1px; 
} 

.apple_pagination a { 
    text-decoration: none; 
    color: black; 
} 

.apple_pagination a:hover, .apple_pagination a:focus { 
    text-decoration: underline; 
} 

답변

0

한번에 표시 버튼 :에서

샘플 코드는 왼쪽;

.apple_pagination a{ 
    float:left 
} 
+0

가로로 정렬했는데 모두 중앙에 놓여있는 그룹 대신 블록의 왼쪽에 붙어 있습니다. –

+0

그게 전부 였어. apple_pagination {display : inline-block}도 추가했습니다. 이제 전체 블록이 왼쪽 정렬되고 컨트롤이 가로로 정렬됩니다. 이 경우에는 저에게 효과적입니다. –