如何在 asp:panel 中水平渲染用户控件？答案

【问题标题】：How to render usercontrols in asp:panel horizontally?如何在 asp:panel 中水平渲染用户控件？
【发布时间】：2012-01-17 19:25:39
【问题描述】：

我在 asp:panel 中添加了许多用户控件，但这些控件垂直呈现，每个新控件低于前一个控件。如何水平渲染控件（如果控件的宽度超过屏幕宽度，则使用滚动条）

提前谢谢你

【问题讨论】：

标签： asp.net html layout user-controls panel

【解决方案1】：

ASP.NET Panel 控件通常呈现到客户端的<div> 元素。你应该给它添加一个类：

<asp:Panel CssClass='float-left'>

然后在 CSS 中浮动它们：

.float-left
{
   float: left;
}

【讨论】：

【解决方案2】：

您可以在表格的单元格中水平添加每个用户控件或将 CSS display:inline 属性设置/应用到用户控件的容器。

【讨论】：

【解决方案3】：

由于 html 解析器将用户控件呈现为整个 html 元素，您应该创建一个包含所需列和行的表格，并将您的用户控件放在 td 标记中。如果您的用户控件的数量未知并且由运行时的代码决定，您应该创建一个 asp:table 并添加预定义的表格单元格和行。

希望对您有所帮助。问候。

<table style="width:100%;">
    <tr>
        <td>
        <UC:Special_Ad_Holder_UC ID="Special_ad_holder_UC1" runat="server" />
        </td>
        <td>
        <UC:Special_Ad_Holder_UC ID="Special_ad_holder_UC2" runat="server" />
        </td>
        <td>
        <UC:Special_Ad_Holder_UC ID="Special_ad_holder_UC3" runat="server" />
        </td>
    </tr>
    <tr>
        <td>
        <UC:Special_Ad_Holder_UC ID="Special_ad_holder_UC4" runat="server" />
        </td>
        <td>
        <UC:Special_Ad_Holder_UC ID="Special_ad_holder_UC5" runat="server" />
        </td>
        <td>
        <UC:Special_Ad_Holder_UC ID="Special_ad_holder_UC6" runat="server" />
        </td>
    </tr>
    <tr>
        <td>
        <UC:Special_Ad_Holder_UC ID="Special_ad_holder_UC7" runat="server" />
        </td>
        <td>
        <UC:Special_Ad_Holder_UC ID="Special_ad_holder_UC8" runat="server" />
        </td>
        <td>
        <UC:Special_Ad_Holder_UC ID="Special_ad_holder_UC9" runat="server" />
        </td>
    </tr>
</table>

【讨论】：