每一个完美布局后面都有一个龌龊的实现。

1.digg.com分页

对a标签进行float布局,优点不知道,缺点不知道怎么居中布局。

.pages { text-align:center; margin:0 auto; }
.pages a {
    display: block;
    float: left;
    padding: 0.2em 0.5em;
    margin-right: 0.1em; 
    border: #9aafe5 1px solid; 
}
.pages a:hover { border-color: #2e6ab1;text-decoration: none;} 
.pages a.nextprev {font-weight: bold; } 
.pages span { 
    display: block;
    float: left;
    border: #fff 1px solid; 
    padding:0.2em 0.5em;
    margin-right: 0.1em;
} 
.pages span.current { 
    border: #2e6ab1 1px solid;
    font-weight:bold;
    background:#2e6ab1;
    color:#fff;
} 
.pages span.nextpre { border: #ddd 1px solid; color: #999; }

2.flickr.com分页

不用对a标签进行float布局,优点能居中,也能居左居右对齐。

.pageContainer { text-align: center; padding:15px; border:1px solid red;}
.pager { font-size: 12px; margin-left: auto; margin-right: auto;}
.pager a { 
    padding: 4px 6px; 
    border: solid 1px #9AAFE5; 
    background: #fff; 
    text-decoration: none; 
    margin:0
}
.pager a:hover {color: #105CB6; border-color: #2E6AB1; text-decoration: none;} 
.pager a.nextprev { 
    margin-right: 20px; 
    padding:4px 6px; 
    *padding-bottom:2px; 
    border: #9AAFE5 1px solid; 
    color: #105CB6; 
    font-weight:bold;
}
.pager span.current { 
    padding: 5px 6px; 
    border-color: #2E6AB1; 
    font-weight: bold; 
    background: #2E6AB1; 
    color: #fff;
}
.pager span.nextprev { 
    margin-left: 20px; 
    padding: 4px 6px; 
    *padding-bottom:2px; 
    border: #ddd 1px solid; 
    color: #999; 
}

以上代码在IE5.5,IE6,IE7以及新版的Opera、Firefox和Netscape下表现一致。IE5能显示基本效果,其他没试过,也没什么必要。演示例子