模板字段寬度在asp.net中的網格視圖中不增加

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>