我如何显示两个asp:面板控件并排

本文关键字：控件 asp 何显示 显示 两个 | 更新日期: 2023-09-27 18:13:22

我有两个面板。我想让他们并排看，但是他们没有。

<标题> . aspx: 
<asp:Panel ID="treeviewMenu" Width="20%" Height="500" runat="server" ScrollBars="Both" HorizontalAlign="Left">
    <asp:TreeView ID="treeview" runat="server" ShowLines="True" ImageSet="XPFileExplorer" OnSelectedNodeChanged="treeview_SelectedNodeChanged">
    </asp:TreeView>
</asp:Panel>
<asp:Panel ID="qvObjektMenu" Width="75%" Height="500" runat="server"  HorizontalAlign="Right">
    <asp:Table runat="server" HorizontalAlign="Right">
        <asp:TableRow>
            <asp:TableCell>
                <asp:Label runat="server">
                    QVObjekt Id:
                </asp:Label>
            </asp:TableCell>
            <asp:TableCell>
                <asp:Label ID="qvObjektId" runat="server"></asp:Label>
            </asp:TableCell>
        </asp:TableRow>
    </asp:Table>
</asp:Panel>

我在这两个元素之外使用了一个表，在它们周围使用了另一个Panel，没有任何效果。我该如何解决这个问题?

我如何显示两个asp:面板控件并排

答案是CSS。如何在CSS中做到这一点有几个选项。

选项1:display:inline-block;

这个css的一个选项是使用display: inline-block;:

<style type="text/css">
   .inlineBlock { display: inline-block; }
</style>

加上在<asp:Panel ...>标签中设置:

<asp:Panel ID="treeviewMenu" ... CssClass="inlineBlock">
    ...
</asp:Panel>
<asp:Panel ID="qvObjektMenu" ... CssClass="inlineBlock">
    ...
</asp:Panel>

选项2a: float:left;

另一个选项，正如Wim的回答中提到的，是使用浮点数。但我不认为你想要结合两个面板有浮动-我怀疑你只需要一个或另一个。: 

<style type="text/css">
.floatLeft { float: left; }
</style>

和

<asp:Panel ID="treeviewMenu" ... CssClass="floatLeft">
    <asp:TreeView ID="treeview" runat="server" ShowLines="True" ImageSet="XPFileExplorer" >
    </asp:TreeView>
</asp:Panel>

(使用当前在标记中的另一个面板)

或

选项2b: float:right; 

<style type="text/css">
.floatRight { float: right; }
</style>

和

 <asp:Panel ID="qvObjektMenu" ... CssClass="floatRight">
    ...
</asp:Panel>

面板将被渲染为DIV元素，所以使用css float:left, float:right和margin应该可以工作。

相关文章：