無序列表的中心列表項

Question

我試圖建立一個家族樹使用ul和li HTML元素。該代碼可用here。它使用psedo元素來「繪製」連接器。但問題是，如果一個特定的人的名字太長的造型是有點過如以下：

我試圖居中垂直連接器，使其在中心的父母之間的水平連接器。任何幫助將不勝感激。 codepen here

這是一塊正在使垂直連接器的CSS：

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

    -webkit-transform: translateX(1px); 
    -moz-transform: translateX(1px); 
    transform: translateX(1px); 

    -webkit-border-radius: 0 5px 0 0; 
    -moz-border-radius: 0 5px 0 0; 
    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: -12px; left: 50%; 
    border-left: 1px solid #ccc; 
    width: 0; height: 32px; 
    z-index: -1; 
} 

.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; 
    background: white; 

    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 

    -webkit-transition: all 0.5s; 
    -moz-transition: all 0.5s; 
    transition: all 0.5s; 
} 
.tree li a+a { 
    margin-left: 20px; 
    position: relative; 
} 
.tree li a+a::before { 
    content: ''; 
    position: absolute; 
    border-top: 1px solid #ccc; 
    top: 50%; left: -21px; 
    width: 20px; 
} 

Answer 1

我能想到的唯一的事情是某種形式的「黑客」，增加了一個看不見的節點樹：

<a href="#">Parent</a> 
<a href="#">Very long parent name Parent</a> 
<a href="#" style="visibility:hidden;">Parent</a> <!-- ugly hack that works --> 

它通過與所述相同的寬度左葉添加不可見的中心葉頂行（Parent）

Answer 2

我認爲垂直酒吧應該可能來自錨定僞類 - 而不是來自無序列表。有一種很酷的「中心任何東西」技術，我認爲適用於你的問題。這裏有一個小片段我說：

.tree li a+a::after { 
    content: ''; 
    position: absolute; 
    top: 100%; 
    transform: translateX(-50%); 
    left: 50%; 
    border-left: 1px solid #ccc; 
    width: 0; 
    height: 21px; 
    z-index: -1;  
} 

的​​規則處理中心位，只需要一個相對定位的父的工作，你已經有了。我截取了一張如何應用於包含長名稱的錨點的截圖。