2016-09-16 11 views
2

順序のないリストを使用して祖先図を作成していますが、画面上で正しく表示するのが難しいです。私はCSS3 Family Treeのコードを使い始めましたが、それは名前にもかかわらず、家系ではなく組織図であるものを作り出しています。テストの目的のために CSS3疑似要素を使用してグラフをフォーマットする

は、私はこのようなHTMLとCSSを持っている:

.tree ul { 
 
    padding-top: 20px; 
 
    position: relative; 
 
} 
 
.tree li { 
 
    display: inline-block; 
 
    white-space: nowrap; 
 
    vertical-align: top; 
 
    margin: 0 -2px 0 -2px; 
 
    text-align: center; 
 
    list-style-type: none; 
 
    position: relative; 
 
    padding: 20px 5px 0 5px; 
 
} 
 
/*We will use ::before and ::after to draw the connectors*/ 
 

 
.tree li::before, 
 
.tree li::after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 50%; 
 
    border-top: 1px solid #ccc; 
 
    width: 50%; 
 
    height: 20px; 
 
} 
 
.tree li::after { 
 
    right: auto; 
 
    left: 50%; 
 
    border-left: 1px solid #ccc; 
 
} 
 
/*We need to remove left-right connectors from elements without 
 
any siblings*/ 
 

 
.tree li:only-child::after, 
 
.tree li:only-child::before { 
 
    display: none; 
 
} 
 
/*Remove space from the top of single children*/ 
 

 
.tree li:only-child { 
 
    padding-top: 0; 
 
} 
 
/*Remove left connector from first child and 
 
right connector from last child*/ 
 

 
.tree li:first-child::before, 
 
.tree li:last-child::after { 
 
    border: 0 none; 
 
} 
 
/*Adding back the vertical connector to the last nodes*/ 
 

 
.tree li:last-child::before { 
 
    border-right: 1px solid #ccc; 
 
    border-radius: 0 5px 0 0; 
 
    -webkit-border-radius: 0 5px 0 0; 
 
    -moz-border-radius: 0 5px 0 0; 
 
} 
 
.tree li:first-child::after { 
 
    border-radius: 5px 0 0 0; 
 
    -webkit-border-radius: 5px 0 0 0; 
 
    -moz-border-radius: 5px 0 0 0; 
 
} 
 
/*Time to add downward connectors from parents*/ 
 

 
.tree ul ul::before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 50%; 
 
    border-left: 1px solid #ccc; 
 
    width: 0; 
 
    height: 20px; 
 
} 
 
.tree li a { 
 
    border: 1px solid #ccc; 
 
    padding: 5px 10px; 
 
    text-decoration: none; 
 
    color: #666; 
 
    font-family: arial, verdana, tahoma; 
 
    font-size: 11px; 
 
    display: inline-block; 
 
    border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
}
<div class="tree"> 
 
    <ul> 
 
    <li> 
 
     <a href="#">Self</a> 
 
     <ul> 
 
     <li> 
 
      <a href="#">Father</a> 
 
      <ul> 
 
      <li><a href="#">Grandfather</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">Grandmother</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li> 
 
      <a href="#">Mother</a> 
 
      <ul> 
 
      <li><a href="#">Grandfather</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">Grandmother</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

CSSをCSS3ファミリーツリーから、ほぼ直接に持ち上げられます。

これは、この

Ancestor chart

のように見えますが、私はそれが上部の下部にある「自己」と早い世代で、反転する必要があるチャートを生成します。

リスト構造を反転させてボックスを反転させることはできますが、コネクタを正しく見えるようにするにはCSSを変更する方法が見つかりません。

Inverted tree

修正する::を擬似要素の後に前と::私が欲しいものを手に入れる方法はありますか?それとも私は完全に間違った方法でそれについて行くのですか?

(それが良い仕事かどうまた、右に左と早い世代の「自己」を置くにしてもよいでしょう。)

答えて

1

あなたが再アレンジできHTML、およびいくつかのcss微調整(とすなわち、トップスワップ&下パディング、トップ&下の位置を入れ替えて、新しい配列に一致するように国境半径を変更)、それは動作します:

.tree ul { 
 
    padding: 0 0 20px; 
 
    position: relative; 
 
} 
 

 
.tree li { 
 
    display: inline-block; 
 
    white-space: nowrap; 
 
    vertical-align: bottom; 
 
    margin: 0 -2px 0 -2px; 
 
    text-align: center; 
 
    list-style-type: none; 
 
    position: relative; 
 
    padding: 0 5px 20px 5px; 
 
} 
 

 

 
/*We will use ::before and ::after to draw the connectors*/ 
 

 
.tree li::before, 
 
.tree li::after { 
 
    content: ''; 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 50%; 
 
    border-bottom: 1px solid #ccc; 
 
    width: 50%; 
 
    height: 20px; 
 
} 
 

 
.tree li::after { 
 
    right: auto; 
 
    left: 50%; 
 
    border-left: 1px solid #ccc; 
 
} 
 

 

 
/*We need to remove left-right connectors from elements without 
 
any siblings*/ 
 

 
.tree li:only-child::after, 
 
.tree li:only-child::before { 
 
    display: none; 
 
} 
 

 

 
/*Remove space from the top of single children*/ 
 

 
.tree li:only-child { 
 
    padding: 0; 
 
} 
 

 

 
/*Remove left connector from first child and 
 
right connector from last child*/ 
 

 
.tree li:first-child::before, 
 
.tree li:last-child::after { 
 
    border: 0 none; 
 
} 
 

 

 
/*Adding back the vertical connector to the last nodes*/ 
 

 
.tree li:last-child::before { 
 
    border-right: 1px solid #ccc; 
 
    border-radius: 0 0 5px 0; 
 
    -webkit-border-radius: 0 0 5px 0; 
 
    -moz-border-radius: 0 0 5px 0; 
 
} 
 

 
.tree li:first-child::after { 
 
    border-radius: 0 0 0 5px; 
 
    -webkit-border-radius: 0 0 0 5px; 
 
    -moz-border-radius: 0 0 0 5px; 
 
} 
 

 

 
/*Time to add downward connectors from parents*/ 
 

 
.tree ul ul::before { 
 
    content: ''; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 50%; 
 
    border-left: 1px solid #ccc; 
 
    width: 0; 
 
    height: 20px; 
 
} 
 

 
.tree li a { 
 
    border: 1px solid #ccc; 
 
    padding: 5px 10px; 
 
    text-decoration: none; 
 
    color: #666; 
 
    font-family: arial, verdana, tahoma; 
 
    font-size: 11px; 
 
    display: inline-block; 
 
    border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
}
<div class="tree"> 
 
    <ul> 
 
    <li> 
 
     <ul> 
 
     <li> 
 
      <ul> 
 
      <li><a href="#">Grandfather</a></li> 
 
      <li><a href="#">Grandmother</a></li> 
 
      </ul> 
 
      <a href="#">Father</a> 
 
     </li> 
 
     <li> 
 
      <ul> 
 
      <li><a href="#">Grandfather</a></li> 
 
      <li><a href="#">Grandmother</a></li> 
 
      </ul> 
 
      <a href="#">Mother</a> 
 
     </li> 
 
     </ul> 
 
     <a href="#">Self</a> 
 
    </li> 
 
    </ul> 
 
</div>

また、コードプレーヤーのウェブサイトから(元に戻った)元のツリーを含むjsfiddleもあります。

+0

これは、私がHTMLを再編成することを意図したものでした。それは私を打ち負かしていたCSS疑似要素でした。それを助けてくれてありがとう。本当に感謝しています。 – TrapezeArtist

関連する問題