標籤分頁幫助

我已經構建了一個簡單的分頁列表並使用CSS對其進行了樣式設置。但是，我遇到了一個問題。因爲我希望列表元素以頁面爲中心，所以我使用了一個容器div和relative定位。標籤分頁幫助

這裏有一個圖，顯示我有什麼的那一刻，我想達到的目標：

enter image description here

通知對當前頁碼似乎缺乏一個邊界。

下面是列表中的HTML標記：

<div class="pagination-cont"> 
    <ul class="pagination"> 
     <li class="disabled"><span>&lt; Previous</span></li> 
     <li class="current"><span>1</span></li> 
     <li><a href="#" title="Page 2">2</a></li> 
     <li><a href="#" title="Page 3">3</a></li> 
     <li class="separator">&hellip;</li> 
     <li><a href="#" title="Page 9">9</a></li> 
     <li><a href="#" title="Page 10">10</a></li> 
     <li><a href="#" title="Page 11">11</a></li> 
     <li><a href="#" title="Next Page">Next &gt;</a></li> 
    </ul> 
</div>

和這裏的CSS：

div#content div.pagination-cont { 
    float: left; 
    width: 100%; 
    overflow: hidden; 
    position: relative; 
    margin: 15px 0; 
    border-top: 1px solid #d1d1d3; 
    padding-bottom: 2px; 
    background-color: #e4e4e6; 
} 
    div#content div.pagination-cont ul.pagination { 
     clear: left; 
     float: left; 
     list-style: none; 
     padding: 0; 
     margin: 0; 
     position: relative; 
     left: 50%; 
     text-align: center; 
    } 
     div#content ul.pagination li { 
      display: block; 
      float: left; 
      list-style: none; 
      margin: 0; 
      padding: 0; 
      position: relative; 
      right: 50%; 
      font-size: 110%; 
      text-transform: uppercase; 
      font-weight: bold; 
     } 
      div#content ul.pagination li.disabled span, 
      div#content ul.pagination li.separator { 
       color: #bbb; 
       text-shadow: 1px 1px 0 #f2f2f2; 
       padding: 10px 20px; 
       display: block; 
      } 
      div#content ul.pagination li.separator { 
       border-left: 1px solid #d1d1d3 
      } 
      div#content ul.pagination li a { 
       display: block; 
       padding: 10px 20px; 
       color: #004276; 
       text-decoration: none; 
       border-left: 1px solid #d1d1d3; 
       margin-bottom: 1px 
      } 
       div#content ul.pagination li.current span { 
        display: block; 
        padding: 10px 20px; 
        border-left: 1px solid #d1d1d3; 
        background-color: #fff; 
        color: #999; 
        border-bottom: 1px solid #d1d1d3 
       }

任何幫助將受到歡迎！

來源

2011-05-09 BenM

赦免，就是兩個圖像之間的差異??，都是相同 – diEcho 2011-05-09 07:53:49

@diEcho - 查看圖像下方的句子：'注意當前頁碼看起來缺少邊框。' （即在「我想達到什麼」的形象）... – BenM 2011-05-09 07:54:59

現在明白了，請看答案:) – diEcho 2011-05-09 08:38:50

你幾乎擁有它，只是刪除「溢出：隱藏」，從「div.pagination-CONT」（即保持選定的項目從轉移到頂部），並添加「頂 - 1px的;位置：親屬;」到：‘ul.pagination li.current跨越’，這應該做的伎倆

你可以把它看成http://jsfiddle.net/LGwDV/

來源

2011-05-09 08:16:57 leopic

非常好，非常感謝你的幫助+1 :) – BenM 2011-05-09 09:58:41

嘿，別提了它 – leopic 2011-05-11 07:42:54

刪除

border-top: 1px solid #D1D1D3;

從

DIV＃內容div.pagination-CONT

，並在這裏寫

div#content ul.pagination li { 
      border-top: 1px solid #d1d1d3; 
     }

，並寫上一行在

div#content ul.pagination li.current { 
        border-top: medium none;     
       }

DEMO

來源

2011-05-09 08:10:17 diEcho

標籤分頁幫助

回答

相關問題