asp.net - TreeView 控件呈现为 <div>，导致不需要的换行符

Question

我正在尝试创建这样的布局:

在左侧，我想添加一个 ASP.NET TreeView 控件。不幸的是，它似乎呈现为 div，因此会导致换行。我不认为我可以使用 display:inline，因为这似乎不起作用:

 <asp:TreeView ID="TreeView1" runat="server" style="display:inline;"
            onselectednodechanged="TreeView1_SelectedNodeChanged" 
            ontreenodepopulate="TreeView1_TreeNodePopulate" 
            ontreenodeexpanded="TreeView1_TreeNodeExpanded">
            <SelectedNodeStyle Font-Bold="True" Font-Underline="True" />
    </asp:TreeView>

我的标记如下:

<div id="mainDiv">
    <div id="filters">

    </div>
    <div id="dMiddle">
    <span id="sTreeView">
     <asp:TreeView ID="TreeView1" runat="server" style="display:inline;"
            onselectednodechanged="TreeView1_SelectedNodeChanged" 
            ontreenodepopulate="TreeView1_TreeNodePopulate" 
            ontreenodeexpanded="TreeView1_TreeNodeExpanded">
            <SelectedNodeStyle Font-Bold="True" Font-Underline="True" />
    </asp:TreeView>
    </span>
    <span id="sGrid">eventually a grid...</span>
    </div>
</div>

问题是 TreeView 导致换行而不是停留在其范围内(或 div 或我放置它的任何地方)。

有什么办法解决这个问题吗？

Answer 1

我只用三个 <div> s(而不是你现在拥有的 <span> s)。像这样:

<div id="mainDiv">
    <div id="filters">
        Some other stuff goes up here
    </div>
    <div id="dMiddle">
        <asp:TreeView ID="TreeView1" runat="server"
                onselectednodechanged="TreeView1_SelectedNodeChanged" 
                ontreenodepopulate="TreeView1_TreeNodePopulate" 
                ontreenodeexpanded="TreeView1_TreeNodeExpanded">
                <SelectedNodeStyle Font-Bold="True" Font-Underline="True" />
        </asp:TreeView>
    </div>
    <div id="sGrid">
        Eventually a Grid goes here
    </div>
</div>

那么您所需要的只是在您的 <div> 上添加一点 CSS小号:

#sGrid, #dMiddle { display:inline-block; }
#dMiddle { float:left; }

第一行确保你的 dMiddle 和 sGrid <div>让我们一起留在同一条线上(没有强制换行)。

第二行是可选的，只是 float TreeView的 <div>向左(它似乎将两个内联 <divs> 排列得很好)。