c# - 在 GridView 下对齐 Asp.net 按钮

Question

我有一个 GridView，下面有三个按钮。我试图弄清楚如何对齐它们，使第一个按钮的左边缘与 GridView 的左边缘对齐，第二个按钮在 GridView 下方居中，第三个按钮的右边缘与 GridView 的右边缘对齐. 如果 GridView 的宽度扩大，我希望按钮与 GridView 保持对齐。现在，按钮水平“聚集”在一起，向左对齐。这是我想要的粗略草图。

Answer 1

有很多方法可以做到这一点。您可以将按钮放在网格的页脚中，或者在网格下方放置一个与网格宽度相同的大 div 或表格。

我会将它们放在页脚模板中，如下所示：（伪）

div width 100%
   div  33%
     button 1 (align it to left)
   div 33%
     button 2 (align it to center
   div 33%
     button 3 (align it to right

如果您知道它们，您可以使用固定尺寸

编辑： 刚刚注意到网格下的大间隙，你可以这样说

div 100%
   grid  (assuming 100% also)
   div  (100%)
     and div 33% with buttons go here

Answer 2

您可以尝试使用此代码

<FooterTemplate>
  <table>
      <tr>
          <td class=""><asp:Button ID="Btn1" runat="server" Text="Btn1"/>
          </td> 
          <td class=""><asp:Button ID="Btn2" runat="server" Text="Btn2"/>
          </td> 
          <td class=""><asp:Button ID="Btn3" runat="server" Text="Btn3"/>
          </td> 
      </tr>
  </table>
</FooterTemplate>

您可以将样式属性添加到表格单元格

text-align: center;

text-align: left;

text-align: right;

Answer 3

如何将 Gridview 和 Buttons 放在表格的单独行中？

这是一个内联样式的示例：

<table>
    <tr>
        <td colspan="3" style="width: 100%">
            <asp:GridView ID="GridView1" ShowHeader="false">
                 ...
            </asp:GridView>
        </td>
    </tr>
    <tr>
        <td style="width: 33%; text-align: left">
            <asp:Button ID="button1" runat="server" />
        </td>
        <td style="width: 33%; text-align: center">
            <asp:Button ID="button2" runat="server" />
        </td>
         <td style="width: 33%; text-right">
            <asp:Button ID="button3" runat="server" />
        </td>
    </tr>
</table>