使用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，其中包含代碼播放器網站的（反轉）原始樹。