Question

我有一个html表，其中包含一个runat = server的元素。我正在从代码后面加载一些用户控件。

    <td id ="ModuleGridHolder" runat="server" rowspan="3">            
    </td>

这是用户控件HTML

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ModuleGrid.ascx.cs"
    Inherits="RadTreeListTest.Controls.ModuleGrid" %>

    <table cellpadding="0px" cellspacing="0px" style="width:100%;">

    <tr>
    <td colspan="2">
        <asp:GridView ID="gvSectionCells" runat="server" Width="100%" AutoGenerateColumns= "true">
            <HeaderStyle BackColor="#9999FF" />
            <RowStyle HorizontalAlign="Center" />
        </asp:GridView>
    </td>
    <td>
        <asp:GridView ID="gvSectionTotalCells" runat="server" Width="100%" AutoGenerateColumns="false">
            <HeaderStyle BackColor="#9999FF" />
            <RowStyle HorizontalAlign="Center" />
          <Columns>
                <asp:BoundField DataField="sumRow" HeaderText="" />                                      
            </Columns>              
        </asp:GridView>
    </td>
</tr>

这是代码的简化版本，它在其中呈现了几个用户控件。

  foreach loop
  {
      ModuleGrid mg = (ModuleGrid)LoadControl("ModuleGrid.ascx");
      ModuleGridHolder.Controls.Add(mg);
  }

问题是所有渲染的控件都是垂直加载的。在彼此之上。如何在单元格内水平对齐？

我尝试过使用float：left但它不能正常工作？

Answer 1

在代码中使用CssClass参数并应用于每个控件。这样，您可以集中设置在页面上加载的每个动态控件的样式：

foreach loop
{
    ModuleGrid mg = (ModuleGrid)LoadControl("ModuleGrid.ascx");
    mg.CssClass = "myStyle";
    ModuleGridHolder.Controls.Add(mg);
}

控件使用样式表类后，将样式表链接到aspx页面并使用以下内容：

.myStyle
{
   float: left;
   width: 100px;
}

如果您已经在做类似的事情，我建议为每个控件分配一个固定的宽度（或百分比），看看是否让它们浮动到彼此的左边，可能是没有一个指定宽度控件只使用100％宽度并导致后续控件垂直“堆叠”。

总的来说，我完全避免使用表格，只是坚持使用DIV标签。我发现它们比不得不乱用表格，列和行更容易定位。

在HTML表格单元格内水平对齐动态加载的用户控件

1 个答案: