如何在HTML引导树视图内联视图中正确布局列？

我正在使用在页面上显示一些层次结构数据。我试图将树的每个节点分解成几列，但我似乎无法让元素正确地完成它

如果我尝试在树的

text

属性中使用

span

元素，如下所示：

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

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

我得到如下输出：

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

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

---

我尝试过各种各样的组合，结果都差不多。如何使列全部显示在一行上？

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

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

---

嘿，很好。花了这么多时间在这个问题上，而你的答案几乎做到了（只是更改为百分比而不是像素，并添加了一个父div）。谢谢