在水平布局中动态地向面板添加控件

本文关键字：添加 控件 水平 布局 动态 | 更新日期: 2023-09-27 18:04:43

在我的代码隐藏文件中为每个用户创建了一个表。我想将每个表添加到面板，以便所有表水平显示。该表只有1列和多行。所以每个表都应该加在前一个表的旁边我已经尝试过css样式float:left，但它不工作。

我的代码

c#部分:

  foreach( DataRow dr in t.Rows )
  { 
       if(........)
       {    
           tdr.Width = "200px";
           row = new HtmlTableRow(); 
           cell = new HtmlTableCell();
           row = new HtmlTableRow(); 
           cell = new HtmlTableCell();
           cell.InnerText = doc;
           row.Cells.Add(cell);
           tdr.Rows.Add(row);
           row = new HtmlTableRow(); 
           cell = new HtmlTableCell();
           cell.InnerText = "No Timming";
           row.Cells.Add(cell);
           tdr.Rows.Add(row);
           row = new HtmlTableRow(); 
           cell = new HtmlTableCell();
           cell.InnerText = weekday[i];
           row.Cells.Add(cell);
           tdr.Rows.Add(row);
       }
       //dr_list is my panel name 
       //tdr is my table name 
       this.DR_list.Controls.Add(tdr);
   }
CSS部分:

<style>
    .float-left
     {
        float: left;
     }
</style>

ASP。网络部分:

<asp:Panel ID="DR_list" runat="server" Direction="LeftToRight" Height="227px" 
    HorizontalAlign="Left" ScrollBars="Auto" Wrap="False"  
    CssClass='float-left' Width="1103px" >
</asp:Panel>

在水平布局中动态地向面板添加控件

您正在将css float:left添加到父容器中，即您的Panel。

因此你的标记变成了这样的:

<div id="DR_list" class="float-left" >
    <table  width="200px">
     //table 1 markup
    </table>
    <table width="200px" >
     //table 2 markup
    </table>
</div>

因此它对内部子元素

不起作用

你应该把它添加到单独的表中，即

这样做:

假设你的tdr是System.Web.UI.HtmlControls.HtmlTable 

 tdr.Attributes.Add("class", "float-left");

这样你的最终标记就变成了

<div id="DR_list"  >
    <table  width="200px" class="float-left" >
     //table 1 markup
    </table>
    <table width="200px"  class="float-left" >
     //table 2 markup
    </table>
</div>
所以你的实际代码应该看起来像 
foreach( DataRow dr in t.Rows )
{ 
       if(........)
       {   
           tdr = new HtmlTable();
           tdr.Attributes.Add("class", "float-left"); 
           tdr.Width = "200px";
           row = new HtmlTableRow(); 
           cell = new HtmlTableCell();
           /////rest of the logic
       }
}
相关文章：