Question

我怎样才能收紧东西并使字段不那么宽，以便它可以放在没有水平滚动的页面上？我将css添加到div但是该字段仍然很长，而链接文本确实包装（在某些浏览器中）

我正在寻找.net方式让它在所有浏览器中运行。

这是我数据网格的可怕UI bed looking grid

这是我定义的asp.net代码：

<asp:GridView ID="gv" runat="server" CellPadding="4" Font-Names="Verdana" Font-Size="8pt"
    EnableModelValidation="True" ForeColor="#333333" GridLines="None" OnRowCommand="gv_RowCommand"
    OnRowEditing="gv_RowEditing" OnRowCancelingEdit="gv_RowCancelingEdit" OnRowDataBound="gv_RowDataBound"
    OnRowDeleting="gv_RowDeleting" OnRowUpdating="gv_RowUpdating" ShowFooter="true"
    DataKeyNames="ProjectLinkId,LastUpdate" AutoGenerateColumns="False">
    <AlternatingRowStyle BackColor="White" />
    <RowStyle BackColor="#EFF3FB" />
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <table>
                    <tr>
                        <td>
                            <asp:Button runat="server" ID="cbEdit" Text="Edit" Width="75px" Font-Size="8pt" CommandName="Edit" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Button runat="server" ID="cbDelete" Text="Delete" Width="75px" Font-Size="8pt"
                                CommandName="Delete" />
                        </td>
                    </tr>
                </table>
            </ItemTemplate>
            <EditItemTemplate>
                <table>
                    <tr>
                        <td>
                            <asp:Button runat="server" ID="cbUpdate" Text="Update" Width="75px" Font-Size="8pt"
                                CommandName="Update" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Button runat="server" ID="cbCancel" Text="Cancel" Width="75px" Font-Size="8pt"
                                CommandName="Cancel" />
                        </td>
                    </tr>
                </table>
            </EditItemTemplate>
            <FooterTemplate>
                <asp:Button runat="server" ID="cbSave" Text="Insert" Width="75px" Font-Size="8pt"
                    CommandName="Save" />
            </FooterTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Type">
            <ItemTemplate>
                <asp:Label runat="server" ID="lblLinkTypeText" Text='<%# Bind("LinkTypeText") %>'
                    CssClass="DefaultFont" />
            </ItemTemplate>
            <EditItemTemplate>
                <asp:DropDownList runat="server" ID="ddlLinkTypeCID" CssClass="DefaultFont" />
            </EditItemTemplate>
            <FooterTemplate>
                <asp:DropDownList runat="server" ID="ftrLinkTypeCID" CssClass="DefaultFont" />
            </FooterTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="URL">
            <ItemTemplate>
                <div style="width:316px; word-wrap: break-word">
                    <asp:HyperLink runat="server" ID="lbURL" NavigateUrl='<%# Bind("URL") %>' Text='<%# Bind("URL") %>' Width="300" />
                </div>   
            </ItemTemplate>
            <EditItemTemplate>
                <asp:TextBox runat="server" ID="txtURL" TextMode="MultiLine" Text='<%# Bind("URL") %>'
                    CssClass="DefaultTextBox" />
            </EditItemTemplate>
            <FooterTemplate>
                <asp:TextBox runat="server" ID="ftrURL" TextMode="MultiLine" Text='<%# Bind("URL") %>'
                    CssClass="DefaultTextBox" />
            </FooterTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Description">
            <ItemTemplate>
                <div style="width:316px; word-wrap: break-word">
                    <asp:Label runat="server" ID="lblDescription" Text='<%# Bind("Description") %>' CssClass="DefaultFont"/>
                </div>
            </ItemTemplate>
            <EditItemTemplate>
                <asp:TextBox runat="server" ID="txtDescription" TextMode="MultiLine" Text='<%# Bind("Description") %>'
                    CssClass="DefaultTextBox" />
            </EditItemTemplate>
            <FooterTemplate>
                <asp:TextBox runat="server" ID="ftrDescription" TextMode="MultiLine" Text='<%# Bind("Description") %>'
                    CssClass="DefaultTextBox" />
            </FooterTemplate>
        </asp:TemplateField>
    </Columns>
    <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
    <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
    <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
    <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
    <EditRowStyle BackColor="#2461BF" />
    <AlternatingRowStyle BackColor="White" />
</asp:GridView>

Answer 1

您可以在ItemStyle

中添加TemplateField元素

示例：

<asp:TemplateField>
    <ItemStyle Width="45%" />
    <ItemTemplate>
        ...
    </ItemTemplate>
</asp:TemplateField>

Answer 2

尝试修改ItemTemplate中URL列的宽度，因为这似乎是问题所在。尝试100px而不是316

具体来说，这里：

<ItemTemplate>
   <div style="width:316px; word-wrap: break-word">
   <asp:HyperLink runat="server" ID="lbURL" NavigateUrl='<%# Bind("URL") %>' Text='<%#Bind("URL") %>' Width="300" />
   </div>   
 </ItemTemplate>

Answer 3

为什么不在它上面放一个css类并控制css文件的宽度？

/ **编辑** /

你可以内联或者用cssClass =“nameofcolumn”放一个类然后放在css文件中：

.nameofcolumn { 宽度：400px; }

希望它有所帮助！

Answer 4

这是另一种变体

<asp:TemplateField>
    <ItemStyle CssClass="styled-column"></ItemStyle>
    <ItemTemplate>
       ...
    </ItemTemplate>
</asp:TemplateField>

的CSS：

.styled-column {
    width: 300px;
}

呈现为：

<td class="styled-column">
      ...          
</td>

我可以在数据网格中设置字段的宽度吗？

4 个答案: