Я хочу отобразить что-то подобное на странице HTML:
С ограничением использования только CSS. Основная проблема заключается в создании следующих: |└ ├
"ветвей".
Пример выше был решением, которое я сделал сам. Каждая ветвь имеет одинаковую ширину и состоит из:
<ul>
<li></li>
<li></li>
</ul>
Трюк состоит в том, чтобы соответствующим образом повернуть границы <li>
черного. Изображение, чтобы показать это (просто быстрый макет)
Проблема, с которой я столкнулся, превращает границу белого в соответствие с фоном вместо прозрачного (видимо, CSS имеет некоторые проблемы с прозрачными границами в списках).
Мой вопрос: какое самое простое решение? Есть ли лучший способ сделать это?
EDIT: некоторые требования:
- Филиал должен иметь фиксированную ширину, но высота должна соответственно расти с высотой ячейки таблицы.
- Два элемента
li
должны занимать половину высоты строки, каждая из которых такова, что-
в├
всегда будет посередине.
EDIT2: http://en.wikipedia.org/wiki/Template:Tree_list провел небольшое исследование. Увы, они используют изображения для ветвей.
PS: по запросу http://jsfiddle.net/q3zdB/2/