我的OrgChart嘗試換行;我不想這

Question

我有一個組成嵌套ul和li元素的組織。隨着屏幕變小，我的圖表溢出了低於我的實際圖表的問題。我不想那樣。

我希望它創建一個水平滾動選項，而不是查看右邊的內容而不是墜入深淵。

這裏是CodePen：http://codepen.io/jacob_johnson/pen/xwLmWo

和相關的CSS：我一直在使用

* { 
    margin: 0; 
    padding: 0; 
} 

.tree { 
    width: auto; 
    margin-left: auto; 
    margin-right: auto; 
} 

.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; 
} 

試圖NOWRAP在li，並在uloverflow選項無濟於事播放。

Answer 1

我想通了。因此，我已將display: table添加到我的ul元素，並將display: table-cell添加到我的li元素，而不是將我的內容浮動。

* { 
    margin: 0; 
    padding: 0; 
} 

.tree { 
    width: auto; 
    margin-left: auto; 
    margin-right: auto; 
} 

.tree ul { 
    padding-top: 20px; 
    position: relative; 
    transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
    -moz-transition: all 0.5s; 

    display: table; 
} 

.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; 

    display: table-cell; 
    vertical-align: top; 
}