asp css 简单浮动在 treeview 上不起作用

Question

我的目标是在左边做一个 treeview，在右边做一个 content place holder。这是 HTML :

<body>
    <form id="formMenu" runat="server">
    <asp:TreeView ID="treeMenu" runat="server" DataSourceID="SiteMapDataSource1">
    </asp:TreeView>

    <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />

    <div id="content">
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>

这是我的 CSS :

#treeMenu
{
    float:left;
    width:200px;
}

#content
{
    float:right;
    margin-left:auto;
    margin-right:auto;
}

浮动过早工作。 #content飘到了#treeMenu的右边，但是飘得太右了，它的位置在下面而不是#treeMenu的右边.

我尝试使用 overflow:hidden 但它没有任何效果。

请帮助我。感谢您的帮助。

Answer 1

您可以将 overflow:auto 添加到 #content，不要在其上设置任何 float。

#menubar {
    float:left;
    width:200px;
    background:lime;
}
#content {
    overflow:auto;
    background:orange;
}

<div id="menubar">menubar</div>
<div id="content">Chocolate liquorice gummi bears biscuit macaroon cheesecake candy sugar plum. Liquorice sugar plum caramels cookie candy toffee pie. Bonbon pudding cotton candy. Soufflé bear claw sesame snaps soufflé pudding chupa chups pudding ice cream candy. Marshmallow carrot cake muffin apple pie powder. Tootsie roll cotton candy cheesecake. Dragée candy canes toffee. Dragée toffee macaroon. Ice cream gummies chocolate sugar plum. Oat cake danish powder cake sugar plum biscuit. Gummi bears liquorice jelly beans. Chocolate bar biscuit gummi bears pastry chocolate cake marzipan cake.</div>

或者，您可以为两个元素设置使用 table-cell。

#menubar {
    display:table-cell;
    width:200px;
    background:lime;
}
#content {
    display:table-cell;
    background:orange;
}

<div id="menubar">menubar</div>
<div id="content">Chocolate liquorice gummi bears biscuit macaroon cheesecake candy sugar plum. Liquorice sugar plum caramels cookie candy toffee pie. Bonbon pudding cotton candy. Soufflé bear claw sesame snaps soufflé pudding chupa chups pudding ice cream candy. Marshmallow carrot cake muffin apple pie powder. Tootsie roll cotton candy cheesecake. Dragée candy canes toffee. Dragée toffee macaroon. Ice cream gummies chocolate sugar plum. Oat cake danish powder cake sugar plum biscuit. Gummi bears liquorice jelly beans. Chocolate bar biscuit gummi bears pastry chocolate cake marzipan cake.</div>

Answer 2

我需要用 div 包装 TreeView 并使用 div 的 id 来执行 CSS 以使其工作。

asp css 简单浮动在 treeview 上不起作用

asp css with simple float not working on treeview

html

css

asp.net

treeview