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

Question

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

如果我尝试像这样在树的span属性中使用text元素：

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

我得到以下输出：

如果我尝试像这样在树的div属性中使用text元素：

<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;
}