我的OrgChart嘗試包裝； 我不要這個

Question

我有一個由嵌套的ul和li元素組成的OrgChart。 隨着屏幕變小，我的圖表在實際圖表下方溢出時出現問題。 我不要

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

這是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;
}

我試過在li上使用nowrap並在ul上使用overflow選項無濟於事。

Answer 1

我想到了。 因此，除了浮動我的內容，我還向我的ul元素添加了display: table ，向我的li元素添加了display: table-cell 。

* {
  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;
}