Как правильно расположить столбцы в виде встроенного в HTML Bootstrap Treeview?

Question

Я использую библиотеку Bootstrap Treeview для отображения некоторых иерархических данных на странице. Я пытаюсь разбить каждый узел дерева на несколько столбцов, но не могу заставить элементы сделать это правильно.

Если я попытаюсь использовать 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;
}