The markup below displays the panels one below the other. What I would like to do is display them right next to each other. Here is the markup:
<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>
The above currently displays it like so:
Image A
Image B
When in fact, I would like it like Image A Image B
The HTML rendered is pretty much the same as above, but the Panels are rendered as divs, so the structure without everything inside is:
<div>
<div></div>
<div></div>
<div>
A Panel renders in HTML as a div. The easiest way is to just use CSS to override the default behavior of divs.
<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>
This example uses the style attribute, which gets passed on straight to the HTML. You can use CssClass if you prefer to do it in a reusable stylesheet of course.
asp:Panel will render as a DIV, check out this answer and see if it works
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With