GridView 的 css 分页
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2577144/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 21:51:58 来源:igfitidea点击:
css pagination for GridView
提问by cnd
my css :
/* for greed view */
.pagination {
font-size: 80%;
}
.pagination a {
text-decoration: none;
color: #15B;
}
.pagination a, .pagination span {
display: block;
float: left;
padding: 0.3em 0.5em;
margin-right: 5px;
margin-bottom: 5px;
}
.pagination .current {
background: #26B;
color: #fff;
border: solid 1px #AAE;
}
.pagination .current.prev, .pagination .current.next{
color:#999;
border-color:#999;
background:#fff;
}
Grid View :
网格视图 ：
<asp:Panel ID="Panel2" style="width:1208px; border-style: outset; border-width: 4px; "
runat="server" ScrollBars="Auto">
<asp:GridView ID="GridView2" runat="server"
DataSourceID="SqlDataSource1" Width="100%"
ondatabound="GridView2_DataBound" CellPadding="4" ForeColor="#333333" onrowdatabound="GridView2_RowDataBound"
HorizontalAlign="Center" AllowPaging="True" PageSize="15"
onrowcreated="GridView2_RowCreated">
<PagerSettings FirstPageText="Первая"
LastPageText="Последняя"
PageButtonCount="15" position="Bottom" />
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<PagerStyle CssClass="pagination" HorizontalAlign="Left"
VerticalAlign="Middle"
Font-Size="14pt" Wrap="True" BackColor="#284775" />
but .pagination .current doesn't appears on current page and I can's see the border on it. What am I doing wrong ?
但是 .pagination .current 没有出现在当前页面上，我可以看到它的边框。我究竟做错了什么 ？
回答by Aristos
Try this (and change the colors/width as you like)
试试这个（并根据需要更改颜色/宽度）
.pagination
{
line-height: 26px;
}
.pagination span
{
padding: 5px;
border: solid 1px #477B0E;
text-decoration: none;
white-space: nowrap;
background: #547B2A;
}
.pagination a,
.pagination a:visited
{
text-decoration: none;
padding: 6px;
white-space: nowrap;
}
.pagination a:hover,
.pagination a:active
{
padding: 5px;
border: solid 1px #9ECDE7;
text-decoration: none;
white-space: nowrap;
background: #486694;
}
...
...
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Left" CssClass="pagination" />
a small example on how the number will shown: http://jsfiddle.net/THVb9/2/
关于数字如何显示的一个小例子：http: //jsfiddle.net/THVb9/2/
