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

Question

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

在左侧，我想添加一个 ASP.NETTreeView控件。不幸的是，它似乎呈现为 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>

那么你只需要在你的 s 上添加一点 CSS <div>：

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

那里的第一行确保您的 dMiddle 和 sGrid<div>一起保持在同一行（没有强制换行）。

第二行是可选的，只是将TreeView's浮动<div>到左侧（似乎将两个 inline <divs>s 很好地对齐）。