如何右对齐 GridView 分页按钮?

问题描述 投票:0回答:3

我无法让我的分页按钮:“<< < > >>”向右对齐。 这是我的 GridView:

               <asp:GridView ID="GridView1" ShowHeader="false" AllowPaging="true" PageSize="2"
                                AutoGenerateColumns="false" Width="100%" runat="server">
                                <Columns>
                                    <asp:TemplateField>
                                        <ItemTemplate>
                                           foo
                                        </ItemTemplate>
                                        <ItemStyle CssClass="blah" />
                                    </asp:TemplateField>
                                    <asp:TemplateField>
                                        <ItemTemplate>
                                            bar
                                        </ItemTemplate>
                                        <ItemStyle CssClass="pluh" />
                                    </asp:TemplateField>
                                </Columns>

                                <PagerStyle CssClass="gridpager" HorizontalAlign="Right" />
                                <PagerSettings Mode="NextPreviousFirstLast" FirstPageText="<<" PreviousPageText="<"
                                    NextPageText=">" LastPageText=" >>"  Position="Bottom" />

                            </asp:GridView>

CSS 样式:

   .gridpager, .gridpager td
    {
       padding-left: 5px;
       text-align: right;
    }    

如果我删除 PageStyle CssClass 并在 PagerSettings 上使用 HorizontalAlign="Right" ,它可以工作,但是我没有得到我需要的填充。 并且像我的示例一样指定 CssClass 和 HorizontalAlign 不起作用。

我需要做什么?

谢谢!

css asp.net gridview pagination
3个回答
4
投票

看起来是因为 Web 表单输出的标记很糟糕。 寻呼机被创建为 td 中的表。 我可以用这个 CSS 让它工作:

.gridpager table {
    float: right;
}

编辑:很高兴你明白了。 我不知道你是否想用纯 CSS 来做到这一点。 我也不太喜欢

float
方法。

编辑2:看起来渲染的网格在您使用

align
 时使用用于寻呼机的 
td
 中的 
<PagerStyle HorizontalAlign="Right" />

属性

1
投票

嗯,我觉得有点傻,但事实证明我只需要从我的风格中删除“text-align:right”。 感谢您的阅读!


0
投票

你可以做一个简单的 CSS 技巧:

.gridpager td table{
     margin-right:20px;
}

这应该可以解决问题。

最新问题
© www.soinside.com 2019 - 2025. All rights reserved.