标签分页帮助

我已经构建了一个简单的分页列表并使用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

标签分页帮助

回答

相关问题