在 asp.net 的网格视图中模板字段宽度没有增加答案

【问题标题】：template field width is not increasing in grid view in asp.net在 asp.net 的网格视图中模板字段宽度没有增加
【发布时间】：2016-03-20 00:26:30
【问题描述】：

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

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

【问题讨论】：

标签： html css asp.net gridview templatefield

【解决方案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>

【讨论】：