如何在同一行显示 asp:panels？答案

【问题标题】：How do display asp:panels on same line?如何在同一行显示 asp:panels？
【发布时间】：2009-09-25 17:09:41
【问题描述】：

下面的标记显示一个在另一个之下的面板。我想做的是将它们彼此相邻显示。这是标记：

<div>
    <asp:Panel ID="pnlA" runat="server">
        <img src="../images/A.png" /> 
        <asp:Literal ID="litA" runat="server" Text="A"></asp:Literal>
    </asp:Panel>
    <asp:Panel ID="pnlB" runat="server">
        <img src="../images/B.png" /> 
        <asp:Literal ID="litB" runat="server" Text="B"></asp:Literal>
    </asp:Panel>
</div>

以上目前显示如下：

图片A

图片 B

事实上，我希望它像 Image A Image B

渲染的 HTML 和上面的差不多，但是 Panels 渲染为 div，所以里面没有任何东西的结构是：

<div>
    <div></div>
    <div></div>
<div>

【问题讨论】：

这很可能是生成的 html 和包含 div 的结果（与面板标签相反）。如果您检查呈现的页面，并可能发布生成的 html，我们可能很快就可以弄清楚这一点。
如果有帮助的话，我不需要在这里使用 div。
我也把 div 拿出来了，它仍然显示在两个单独的行上。

标签： asp.net

【解决方案1】：

面板在 HTML 中呈现为 div。最简单的方法是只使用 CSS 来覆盖 div 的默认行为。

<asp:Panel ID="pnlA" runat="server" style="display:inline;">
    <img src="App_Themes/TicketDeskTheme/file.gif" /> 
    <asp:Literal ID="litA" runat="server" Text="A"></asp:Literal>
</asp:Panel>
<asp:Panel ID="pnlB" runat="server" style="display:inline;">
    <img src="App_Themes/TicketDeskTheme/file.gif" /> 
    <asp:Literal ID="litB" runat="server" Text="B"></asp:Literal>
</asp:Panel>

此示例使用样式属性，该属性直接传递给 HTML。当然，如果您喜欢在可重用样式表中使用 CssClass，则可以使用它。

【讨论】：

【解决方案2】：

asp:Panel 将呈现为 DIV，检查 this answer 并查看它是否有效

【讨论】：

尝试在第二个面板之后使用 ClearBoth 添加 br