html - 模板字段宽度在 asp.net 的 GridView 中没有增加

Question

我使用了一个模板字段来添加编辑、更新、删除和取消图像图标。但是编辑和删除模板字段宽度很小，由于宽度较小，这两张图片在垂直方向上显示为一张。如何增加模板字段的宽度，使其可以在一行中水平显示两个图像

  <asp:TemplateField>

     <ItemStyle Width="80px" />
<HeaderStyle  Width="80px" />
 <FooterStyle Width="80px" /> 
        <ItemTemplate>
        <asp:ImageButton ID="btnEdit" runat="server" CommandName="Edit" ImageUrl="img/edit.png" ToolTip="Edit" />
        <asp:ImageButton ID="btnDelete" runat="server" CommandName="Delete" ImageUrl="img/delete.PNG" ToolTip="Delete" />
    </ItemTemplate>
    <EditItemTemplate>
        <asp:ImageButton ID="btnUpdate" runat="server" CommandName="Update" ImageUrl="img/icon-update.png" ToolTip="Update" Height="18px" Width="18px" />
        <asp:ImageButton ID="btnCancel" runat="server" CommandName="Cancel" ImageUrl="img/icon-Cancel.png" ToolTip="Cancel" CausesValidation="false" Height="16px" Width="16px" />
    </EditItemTemplate>
   </asp:TemplateField>

Answer 1

您可能需要将按钮包裹在一个 div 中，并使用 CSS 样式来设置宽度。

在您的样式表中定义一个选择器，如下所示:

.buttonColumnWidth
{
    width: 80px; /* change this value as required */
}

然后，对您的 Gridview 进行以下更改:

    <asp:TemplateField>

         <ItemStyle Width="80px" />
         <HeaderStyle  Width="80px" />
         <FooterStyle Width="80px" /> 
            <ItemTemplate>
            <div class="buttonColumnWidth">
                <asp:ImageButton ID="btnEdit" runat="server" CommandName="Edit" ImageUrl="img/edit.png" ToolTip="Edit" />
                <asp:ImageButton ID="btnDelete" runat="server" CommandName="Delete" ImageUrl="img/delete.PNG" ToolTip="Delete" />
            </div>
        </ItemTemplate>
        <EditItemTemplate>
            <div class="buttonColumnWidth">
                <asp:ImageButton ID="btnUpdate" runat="server" CommandName="Update" ImageUrl="img/icon-update.png" ToolTip="Update" Height="18px" Width="18px" />
                <asp:ImageButton ID="btnCancel" runat="server" CommandName="Cancel" ImageUrl="img/icon-Cancel.png" ToolTip="Cancel" CausesValidation="false" Height="16px" Width="16px" />
            </div>
        </EditItemTemplate>
   </asp:TemplateField>