web-dev-qa-db-ja.com

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インデックスを意味のあるものにする別の方法はありますか？

htmlcsshtml-lists
19
at.

jsFiddle Demo

日付の付いたすばらしい オンラインチュートリアル があります。

imagesを使用して固有の弾丸を作成しましたが、あなたの場合はパイプを使用できます（つまり、|）記号を使用して、目的の色でより大きなフォントサイズを指定します。

スクリーンショット：

編集：

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

jsFiddleデモ2


編集2：

これが最終的な改訂jsFiddleリビジョンであり、エスケープされたスペースを追加して、曲線的な接続を維持しながら視認性を向上させます。

jsFiddle Demo 3 および 3b

EDIT 3：これは、上記のデモのcontentプロパティに使用できるオプションですparticular ：

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

確かに、特別な空白スペースは、シンボルの下にある3つの空白のmiddleです。これを使用するには、代替文字を使用する必要はなく、透明度空白スペースのシミュレーションを使用します。透明度のプロパティを削除すると、IE8が幸せになります。念のため、下の空行には1つの特別な空白スペース文字。 EntityおよびNameが機能しないため、使用するクリップボードにコピーします。


EDIT 4：Edit 3の代替は、チェックアウトすることですSO回答を提供 CSSコンテンツを使用したHTMLエンティティの追加 。

7
arttronics

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

file structure with css example

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

デモ

23
bookcasey

単純な例が必要な場合は、次のようにします。

[〜＃〜] 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結果

0
Jasdeep Khalsa