如何在 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;
}