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并在overflow上使用ul选项无效。

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

我的OrgChart试图包裹;我不想要这个

1 个答案: