如何在 HTML Bootstrap Treeview 内联中正确布局列？

Question

我正在使用Bootstrap Treeview library 在页面上显示一些分层数据。我正在尝试将树的每个节点分解为几列，但我似乎无法让元素正确完成。

如果我尝试在树的 text 属性中使用 span 元素，如下所示：

<span style="background-color: yellow; width: 50%;">foo</span><span style="background-color: red; width: 50%">foo</span>

我得到这个输出：

如果我尝试在树的 text 属性中使用 div 元素，如下所示：

<div style="background-color: yellow; width: 50%;">foo</div><div style="background-color: red; width: 50%">foo</div>

我得到这样的输出：

我尝试了各种组合，结果都相似。我该怎么做才能使所有列都显示在一行上？

Answer 1

Div 是块元素，而 span 不是。在 div 上尝试行内块样式并给它一些宽度。

div {
    display: inline-block;
    width: 50px;
}