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

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标签。我发现它们的定位要比混乱的表、列和行容易得多。