Css家譜沒有換行

Question

我試圖讓這個CSS插件沒有包裝工作，但我失敗了。這是我正在關注的tutorial。

有沒有解決方案讓它無法包裝？

這是它的樣子：https://jsfiddle.net/jhkvpxLg/

* {margin: 0; padding: 0;} 
 
.tree ul { 
 
    padding-top: 20px; 
 
    position: relative; 
 
    transition: all 0.5s; 
 
    -webkit-transition: all 0.5s; 
 
    -moz-transition: all 0.5s; 
 
} 
 
.tree li { 
 
    float: left; 
 
    text-align: center; 
 
    list-style-type: none; 
 
    position: relative; 
 
    padding: 20px 5px 0 5px; 
 
    transition: all 0.5s; 
 
    -webkit-transition: all 0.5s; 
 
    -moz-transition: all 0.5s; 
 
} 
 
.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; 
 
} 
 
.tree li:only-child::after, 
 
.tree li:only-child::before { 
 
    display: none; 
 
} 
 
.tree li:only-child{ padding-top: 0;} 
 
.tree li:first-child::before, 
 
.tree li:last-child::after{ 
 
    border: 0 none; 
 
} 
 
.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; 
 
} 
 
.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; 
 
    transition: all 0.5s; 
 
    -webkit-transition: all 0.5s; 
 
    -moz-transition: all 0.5s; 
 
} 
 
.tree li a:hover, 
 
.tree li a:hover+ul li a { 
 
    background: #c8e4f8; color: #000; border: 1px solid #94a0b4; 
 
} 
 
.tree li a:hover+ul li::after, 
 
.tree li a:hover+ul li::before, 
 
.tree li a:hover+ul::before, 
 
.tree li a:hover+ul ul::before{ 
 
    border-color: #94a0b4; 
 
}

<!-- 
 
We will create a family tree using just CSS(3) 
 
The markup will be simple nested lists 
 
--> 
 
<div class="tree"> 
 
    <ul> 
 
    <li> 
 
     <a href="#">Parent</a> 
 
     <ul> 
 
     <li> 
 
      <a href="#">Child</a> 
 
      <ul> 
 
      <li> 
 
       <a href="#">Grand Child</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li> 
 
      <a href="#">Child</a> 
 
      <ul> 
 
      <li><a href="#">Grand Child</a></li> 
 
      <li> 
 
       <a href="#">Grand Child</a> 
 
       <ul> 
 
       <li> 
 
        <a href="#">Great Grand Child</a> 
 
       </li> 
 
       <li> 
 
        <a href="#">Great Grand Child</a> 
 
       </li> 
 
       <li> 
 
        <a href="#">Great Grand Child</a> 
 
       </li> 
 
       </ul> 
 
      </li> 
 
      <li> 
 
       <a href="#">Grand Child</a> 
 
       <ul> 
 
       <li> 
 
        <a href="#">Great Grand Child</a> 
 
       </li> 
 
       <li> 
 
        <a href="#">Great Grand Child</a> 
 
       </li> 
 
       <li> 
 
        <a href="#">Great Grand Child</a> 
 
       </li> 
 
       </ul> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

• 從.tree li刪除float:left（不再需要）和
• 添加display:flex到.tree ul。

fiddle

不要忘記通過autoprefixer運行最終CSS。