标签分页帮助

Question

我已经构建了一个简单的分页列表并使用CSS设置了样式。但是，我遇到了一个问题。因为我希望列表元素在页面上居中，所以我使用了具有div定位的容器relative。

这是一个插图，显示了我目前所拥有的，以及我想要实现的目标：

请注意当前页码上似乎缺少边框。

这是列表的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
                }

感谢任何帮助！

Answer 1

你几乎拥有它，只需从“div.pagination-cont”中移除“overflow：hidden”（即保持所选项目不移动到顶部）并添加“top：-1px; position：relative;” to：“ul.pagination li.current span”，这应该可以解决问题。

您可以将其视为http://jsfiddle.net/LGwDV/

Answer 2

删除

border-top: 1px solid #D1D1D3;

这

div＃content div.pagination-cont

并写在这里

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

并在

中写一行

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

DEMO