CSS3 의사 요소를 사용하여 차트 서식 지정하기

Question

정렬되지 않은 목록을 사용하여 상위 차트를 구성하고 있지만 화면에서 제대로 보이게하는 데 어려움이 있습니다. 나는 CSS3 Family Tree의 코드를 사용하여 시작했는데, 이름에도 불구하고 가계도가 아닌 조직도가 생성됩니다. 테스트의 목적

, 나는 이런 식으로 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 패밀리 트리에서 거의 직접 올려진다.

이이

처럼 보이는 차트를 생산하지만 나는 그것이 상단 하단 및 초기 세대에서 "자기"로 반전 될 필요가있다.

목록 구조를 뒤집어서 상자를 반전시킬 수는 있지만 올바른 모양으로 커넥터를 가져 오는 CSS를 수정할 방법을 찾을 수 없습니다.

수정할 수있는 방법이있는 :: 전 :: 의사 요소 후 내가 원하는 것을 얻는 방법? 아니면 완전히 잘못된 방향으로 가고 있습니까?

(또한 더 나은 일을 할 경우 오른쪽에 왼쪽과 최초의 세대 "자기"를 넣어 허용 할 것이다.)

Answer 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이 있습니다.