Отображение иерархии в CSS

У меня возникли проблемы с приложением CSS для иерархического отображения, например дерева файлов и папок. Я использую вложенные неупорядоченные списки:

<ul>
  <li>animals<ul>
    <li>dogs</li>
    <li>cats</li>
  </ul></li>
</ul>

Они хорошо отображаются с соответствующим CSS минус соединительные линии. Мне нужны линии для подключения. Я делаю это со следующим CSS:

ul ul li:before {
  content: "";
  padding: 15px;
  border: 1px solid #000;
  border-width: 0 0 1px 1px;
  border-radius: 0 0 0 10px;
  position: absolute;
  left: -22px;
  top: -15px;
}

Проблема заключается в том, что линии перекрывают значки для животных, собак и кошек. Я попробовал изменить z-index, чтобы не повлиять. Есть ли лучший способ добиться этого с помощью CSS? Или есть другой способ получить смысл z-index?

Ответ 1

jsFiddle Demo

Там отличный от онлайн-учебник, который делает именно то, что вы ищете.

Он использовал изображения для создания уникальных пуль, но в вашем случае вы можете использовать символ pipe (т.е. |) и указать больший размер шрифта с нужным цветом.

Скриншот:

EDIT:

Вот дополнительный jsFiddle, дублирующий ваши изогнутые соединительные линии.

jsFiddle Demo 2

ИЗМЕНИТЬ 2:

Вот окончательная версия пересмотренная jsFiddle, которая добавляет экранированное пространство, чтобы иметь лучшую видимость при сохранении ваших соблазнительных подключений.

jsFiddle Demo 3 и 3b

РЕДАКТИРОВАТЬ 3: Этот конкретный пробел является вариантом использования для свойства content в демонстрации выше:

Entity  Name Symbol/Description
&#8194; &ensp;   en space

Конечно, специальное пустое пространство - это средний из трех заглавных интервалов в Symbol. Использование этого не требует использования альтернативного символа плюс прозрачность для имитации пустого пространства. Отбрасывание свойства прозрачности означает, что IE8 счастлив. На всякий случай пустая строка ниже содержит 1 единственный символ специального пробела. Скопируйте в буфер обмена для использования, поскольку Entity и Name не работают:

РЕДАКТИРОВАТЬ 4: Альтернативный вариант для редактирования 3 - это проверить ответы, предоставленные для Добавление объектов HTML с использованием содержимого CSS.

Ответ 2

Проверьте этот пример. Вы можете легко заменить коробку с цветком лосося с изображениями:

HTML

<div>
    <h3>Root</h3>
    <ul>        
      <li>Folder 1
        <ul>
            <li>Folder 2
                <ul>
                    <li>file1.xml</li>
                    <li>file2.xml</li>
                    <li>file3.xml</li>
                </ul>
            </li>
            <li>file.html</li>
          </ul>
      </li>
      <li>file.psd</li>
      <li>file.cpp</li>
    </ul>
</div>

CSS

body {
    margin: 20px;
    line-height: 3;
    font-family: sans-serif;

}

div {
    position: relative;
}

ul {
    text-indent: .5em;
    border-left: .25em solid gray;
}

ul ul {
    margin-top: -1.25em;
    margin-left: 1em;

}

li {
    position: relative;
    bottom: -1.25em;
}

li:before {
    content: "";
    display: inline-block;
    width: 2em;
    height: 0;
    position: relative;
    left: -.75em;
    border-top: .25em solid gray;
}

ul ul:before, h3:before, li:after {
    content: '';
    display: block;
    width: 1em;
    height: 1em;
    position: absolute;
    background: salmon;
    border: .25em solid white;
    top: 1em;
    left: .4em;
}

h3 {
    position: absolute;
    top: -1em;
    left: 1.75em;
}

h3:before {
    left: -2.25em;
    top: .5em;
}

Демо

Ответ 3

Если вы хотите упростить пример, то мы идем:

HTML

<ul>
  <li>animals
   <ul>
    <li>dogs</li>
    <li>cats</li>
  </ul></li>
</ul>

CSS

li {
  border-left: 1px solid #000;
  margin-left: 10px;
  margin-top: 5px;
  padding-left: 10px;
}

См. jsFiddle result