Я пытаюсь создать иерархическое древовидное представление для моего проекта и использую эту библиотеку CSS: https://www.cssscript.com/semantic-hierarchy-tree-treeflex/
Однако у меня возникли некоторые проблемы с настройки, и я хотел бы получить несколько советов о том, как исправить эти проблемы.
Чтобы облегчить задачу любому, кто достаточно любезен, чтобы помочь мне, я загрузил версию своего кода в SyncFiddle. Вы можете получить к нему доступ здесь: https://syncfiddle.net/fiddle/-M28YK-QiqZefxa-amPx
Проблема в том, что я добавил дополнительное текстовое поле рядом со строками, которые соединяют каждый раздел иерархии.
Тем не менее, я застрял в том, чтобы заставить текст правильно отображаться, используя CSS.
. Как вы можете видеть в Syn c Fiddle, если вы прокрутите горизонтально, вы увидите, что под родительским элементом GMail текст следующий линии, соединяющие дочерние элементы, перекрывают линии и затрудняют чтение. Вот изображение для справки: https://i.imgur.com/qAF3uHf.png
Я хотел бы отформатировать текст с надписью "Входящие", "Спам", "Черновики" и т. Д. c, чтобы он не не перекрываются, и между верхней строкой и рамкой снизу есть немного больше места. Вот быстрый набросок желаемого результата - извините, пожалуйста, мои плохие навыки рисования. https://i.imgur.com/VSutSqO.png
Как вы можете видеть в коде SyncFiddle, я попытался решить эту проблему, добавив код CSS:
style="position: relative; right: -91px; top: -14px;
Для элементов li. Похоже, это сработало для первого поддерева под названием «Google», однако на остальных оно не сработало.
Любая помощь будет принята с благодарностью, и если вам нужна дополнительная информация от меня, пожалуйста, просто дай мне знать. Кроме того, если у вас есть какие-либо предложения относительно других библиотек, которые могут быть использованы для этого типа проекта, я хотел бы услышать их. Это единственный, который я смог найти в наличии.