Question

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;
}

网格视图：

<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="&#1055;&#1077;&#1088;&#1074;&#1072;&#1103;" 
            LastPageText="&#1055;&#1086;&#1089;&#1083;&#1077;&#1076;&#1085;&#1103;&#1103;" 
            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" />

但.pagination .current没有出现在当前页面上，我可以看到它的边框。我做错了什么？

Answer 1

试试这个（并根据需要更改颜色/宽度）

.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" />

一个关于如何显示数字的小例子：http://jsfiddle.net/THVb9/2/

Answer 2

变得更好的扁平风格。

     .pagination td {
         border: 1px solid transparent !important;
     }

     .pagination span, .pagination a {
         display: flex !important;
         justify-content: center;
         align-items: center;
         height: 30px;
         width: 30px;
         padding: 10px;
         font-size: 12px;
         border-radius: 50px;
         text-decoration: none !important;
     }

     .pagination span {
         background: #C44569;
     }

     .pagination a,
     .pagination a:visited {
         color: #000;
     }

     .pagination a:hover,
     .pagination a:active {
         background-color: #C44569;
     }

GridView的CSS分页

2 个答案: