html - Hierarchy display in CSS

Question

I'm having trouble coming up with CSS for a hierarchical display, like a tree of files and folders. I use nested unordered lists:

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

They display nicely with the proper CSS minus the connecting lines. I need the lines to connect. I do this with the following 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;
}

Problem is the lines overlap the icons for the animals, dogs and cats. I tried changing z-index's to no effect. Is there a better way to achieve this with CSS? Or is there another way to get the z-index making sense?

Answer 1

この例を確認してください。サーモン色のボックスを画像に簡単に置き換えることができます。

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;
}

デモ

Answer 2

jsFiddle デモ

あなたが探していることを正確に行う素晴らしい日付のオンラインチュートリアルがあります.

画像を使用して独自の箇条書きを作成しましたが、この場合、パイプ (つまり、|) 記号を使用して、希望の色でより大きなフォント サイズを指定できます。

スクリーンショット:

編集：

これは、曲線の接続線を複製する追加の jsFiddle です。

jsFiddle デモ 2

編集2：

これは、曲がりくねった接続を維持しながら見やすさを向上させるためにエスケープされたスペースを追加する最終改訂版のjsFiddle リビジョンです。

jsFiddle デモ 3および3b

編集 3:この特定の空白の種類は、content上記のデモでプロパティに使用するオプションです。

Entity  Name Symbol/Description
      en space

確かに、特別な空白は、Symbol の下にある 3 つの空白の真ん中です。これを使用すると、代替文字と透明度を使用して空白をシミュレートする必要がなくなります。透過性プロパティを削除することは、IE8 が満足していることを意味します。念のため、以下の空の行には 1 つの特別な空白文字が含まれています。クリップボードにコピーして使用しますが、機能EntityしNameません:
 

編集 4:編集 3 の代替は、CSS コンテンツを使用して HTML エンティティを追加するために提供されている SO Answers をチェックアウトすることです。

Answer 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 の結果を見る