html - 为什么这个 ASP.NET Gridview 容器不保持其宽度？

Question

我有以下场景:

    .divContenedor
    {
        background-color: #F2F2F2;
        position: relative;
        width: 100%;
    }
    .divGrilla
    {
        width: 100%;
        margin: 0 auto 0 auto;
        display: flex;
        align-items: center;
        padding-left: 10px;
    }

<asp:UpdatePanel runat="server" ID="updCondiciones">
        <ContentTemplate>
            <div class="divContenedor">
                <div class="divGrilla">
                    <asp:GridView ID="dgCondiciones" runat="server"     Width="98%"    AutoGenerateColumns="False"
                        OnRowDataBound="dgCondiciones_RowDataBound" PageSize="20" AllowPaging="true"
                        BorderColor="#DCDCDC" AllowSorting="True" OnSortCommand="dgCondiciones_SortCommand"
                        OnPageIndexChanging="dgCondiciones_PageIndexChanging" OnSorting="dgCondiciones_Sorting">
                        <Columns>
                        </Columns>
                    </asp:GridView>
                </div>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>

“divContenedor”中还有其他 div，但它们不相关。

Gridview 有一个 Width="98%"，它位于一个 Width="100%"的 div 中。当我得到包含大文本的行时，GridView 会正确扩展到 98%，但是当我得到包含较短文本的行时，它会收缩。它应该始终保持相同的宽度。

因为“divContenedor”和“divGrilla”的 Width="100%"它们应该扩展到屏幕大小，对吗？

我已经调试了页面，我注意到在“divGrilla”和 Gridview(呈现为表格)之间呈现了一个额外的 div:

<div class="divGrilla">
  <div>
    <table id="dgCondiciones"></table>
  </div>
</div>

“divGrilla”以 Width="100%"呈现，而 Gridview (dgCondiciones) 实际上具有 Width="98%"。问题是 dgCondiciones 正在调整到这个额外 div 的 98%，这似乎有一个较短的宽度。

有人可以向我解释一下这个额外的 div 是什么吗？如果有办法保持 GridView 宽度 WITHOUT 为每一列设置特定宽度并且WITHOUT 设置以“px”为单位的 Gridview 宽度？

Answer 1

<asp:UpdatePanel runat="server" ID="updCondiciones">
    <ContentTemplate>
        <div class="divContenedor">
            <div class="divGrilla">
                <asp:GridView ID="GridView1" runat="server" Width="98%" AutoGenerateColumns="False"
                    OnRowDataBound="dgCondiciones_RowDataBound" PageSize="20" AllowPaging="true"
                    BorderColor="#DCDCDC" AllowSorting="True" OnSortCommand="dgCondiciones_SortCommand"
                    OnPageIndexChanging="dgCondiciones_PageIndexChanging" OnSorting="dgCondiciones_Sorting">
                    <Columns>
                        <asp:TemplateField HeaderText="">
                            <ItemTemplate>
                                <asp:DropDownList ID="test" runat="server" Width="98%" >
                                </asp:DropDownList>
                            </ItemTemplate>
                            <ItemStyle HorizontalAlign="Left" Width="98%" />
                            <HeaderStyle HorizontalAlign="Left" Width="98%" />
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>
            </div>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

您编写了正确的代码，只需将< ItemStyle Horizo​​ntalAlign="Left"Width="98%"/> 添加到列的模板字段中。 并且 Gridview 在 html 中总是呈现为表格，所以我们的观察是正确的。 仅根据您的要求将 itemstyle 与 with 一起使用，您的问题将得到解决。 如果您在执行此操作时遇到任何其他问题，请告诉我。