TreeView控件呈现为<div>，导致不需要的换行符</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>一起停留在同一条线上（没有强制换行）。

第二行是可选的，只是将TreeView的{​​{1}}向左浮动（它似乎很好地排列了两个内联<div>。）