Javascript 收缩父Div以煽动子对象

我正在尝试创建一个族谱，这项功能的最后一部分给了我一些困难

“我的树”是一系列列表元素，它们都浮动到左侧

我想要的是，如果树扩展超过屏幕大小，父div c1应该允许用户在树上水平滚动

现在发生的事情是，如果树的宽度大于c1，那么树会自我包裹，使其无法读取

我通过在c1中添加一个名为c2的div临时修复了这个问题，它的宽度为100000px。基本上，这棵树不会变得这么大，所以它永远不会自我包裹，用户可以在树上滚动

我想要的是，在使用javascript加载时，以某种方式使c2的宽度适合树，或者以某种方式找到一个css解决方案

我尝试过使用空白：nowrap，以及许多其他类似问题的解决方案，但似乎没有任何效果

*{边距：0；填充：0；} .btn{ 浮动：对； 光标：指针； 保证金：5px； 填充物：5px； 边框：1px实心ccc； 颜色：ccc； 边界半径：5px； -webkit边界半径：5px； -moz边界半径：5px； -webkit用户选择：无；/*Chrome/Safari*/ -moz用户选择：无；/*Firefox*/ -ms用户选择：无；/*IE10+*/ } .scrollbtn:悬停{ 背景：c8e4f8；颜色：000；边框：1px实心94a0b4； } c1{ 宽度：96%； 溢出：自动； 填充：2%； } c2{ 宽度：100000像素； } 树胶{ 填充顶部：20px；位置：相对； -webkit过渡：所有0.5s； -moz转换：所有0.5s； 过渡：均为0.5s； } 李先生{ 浮动：左；文本对齐：居中； 列表样式类型：无； 位置：相对位置； 填充：20px 5px 0 5px； -webkit过渡：所有0.5s； -moz转换：所有0.5s； 过渡：均为0.5s； } /*我们将使用：：before和：：after来绘制连接器*/ .tree li:：之前，.tree li:：之后{ 内容：； 位置：绝对；顶部：0；右侧：50%； 边框顶部：1px实心ccc； 宽度：50%；高度：32px； z指数：-1； } 李树：之后{ 右：自动；左：50%； 左边框：1px实心ccc； } /*我们需要移除元素中的左右连接器，而不需要 有兄弟姐妹吗*/ .tree li:独生子女：：之后，.tree li:独生子女：：之前{ 显示：无； } /*删除单个子对象顶部的空间*/ .tree li:唯一的子项{padding top:0；} .tree李莉：独生子女{float:none；} /*从第一个子系统上拆下左侧接头并拆下 上一个子节点的右连接器*/ .tree li:第一个孩子：：之前，.tree li:最后一个孩子：：之后{ 边界：0无； } /*将垂直连接件添加回最后一个节点*/ 李树：最后一个孩子：：之前{ 右边框：1px实心ccc； 边界半径：0 5px 0 0； -webkit转换：translateX1px； -moz变换：translateX1px； 转换：translateX1px； -webkit边界半径：0 5px 0； -moz边界半径：0 5px 0； 边界半径：0 5px 0 0； } 李树：第一个孩子：：之后{ 边界半径：5px0； -webkit边界半径：5px 0； -moz边界半径：5px 0； } /*从父级添加向下连接器的时间到了*/ .树ul：：以前{ 内容：； 位置：绝对；顶部：-12px；左侧：50%； 左边框：1px实心ccc； 宽度：0；高度：32px； z指数：-1； } 李树先生{ 边框：1px实心ccc； 填充物：5px10px； 文字装饰：无； 颜色：666； 字体系列：arial、verdana、tahoma； 字体大小：11px； 显示：内联块； 背景：白色； -webkit边界半径：5px； -moz边界半径：5px； 边界半径：5px； -webkit过渡：所有0.5s； -moz转换：所有0.5s； 过渡：均为0.5s； } .李树a+a{ 左边距：20px； 位置：相对位置； } .树李a+a：：之前{ 内容：； 位置：绝对位置； 边框顶部：1px实心ccc； 边框底部：1px实心ccc； 顶部：47%；左侧：-21px； 宽度：20px； 身高：6%； } /*是时候使用一些悬停效果了*/ /*我们还将把悬停效果应用于元素的沿袭*/ .树李a:悬停，.树李a:悬停~ul李a{ 背景：c8e4f8；颜色：000；边框：1px实心94a0b4； } /*悬停时的连接器样式*/ 树李a:悬停~ul李：：之后， 树李a:悬停~ul李：：之前， 树李a：悬停~ul：：之前， 树李a：悬停~ul：：之前 { 边框颜色：94a0b4； } a{ 宽度：130px； }

---

这是一个纯粹的CSS解决方案，如果您没有附加到浮动，这可能会给您带来其他困难-因为只有浮动子元素的父元素将有一个折叠的内容框，您的c2 div的高度为0，其内容挂在底部

CSS中的3个步骤：

除去

您可以完全从HTML中删除c2 div

加

更改.li树选择器中的规则，使该代码块如下所示：

.tree li {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    list-style-type: none;
    position: relative;
    padding: 20px 5px 0 5px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}

这将使用display:inline块将树的各个部分水平放置在一起，垂直对齐：top使它们垂直对齐 到容器顶部，空白处：现在在容器上敲打，确保它们不会流到新的管线上。请注意，在div c1上保持overflow:auto很重要，或者将overflow-x:scroll放在div树上，以启用所需的水平滚动行为

下面的工作片段：

*{边距：0；填充：0；} .btn{ 浮动：对； 光标：指针； 保证金：5px； 填充物：5px； 边框：1px实心ccc； 颜色：ccc； 边界半径：5px； -webkit边界半径：5px； -moz边界半径：5px； -webkit用户选择：无；/*Chrome/Safari*/ -moz用户选择：无；/*Firefox*/ -ms用户选择：无；/*IE10+*/ } .scrollbtn:悬停{ 背景：c8e4f8；颜色：000；边框：1px实心94a0b4； } c1{ 宽度：96%； 溢出：自动； 填充：2%； } /*修改*/ c2{ 宽度：自动； } /*修改*/ .树{ /*溢出-x：滚动*/ 空白：nowrap； } 树胶{ 填充顶部：20px；位置：相对； -webkit过渡：所有0.5s； -moz转换：所有0.5s； 过渡：均为0.5s； } /*修改*/ 李先生{ 显示：内联块； 垂直对齐：顶部； 文本对齐：居中； 列表样式类型：无； 位置：相对位置； 填充：20px 5px 0 5px； -webkit过渡：所有0.5s； -moz转换：所有0.5s； 过渡：均为0.5s； } /*我们将使用：：before和：：after来绘制连接器*/ .tree li:：之前，.tree li:：之后{ 内容：； 位置：绝对；顶部：0；右侧：50%； 边框顶部：1px实心ccc； 宽度：50%；高度：32px； z指数：-1； } 李树：之后{ 右：自动；左：50%； 左边框：1px实心ccc； } /*我们需要移除元素中的左右连接器，而不需要 有兄弟姐妹吗*/ .tree li:独生子女：：之后，.tree li:独生子女：：之前{ 显示：无； } /*删除单个子对象顶部的空间*/ .tree li:唯一的子项{padding top:0；} .tree李莉：独生子女{float:none；} /*从第一个子系统上拆下左侧接头并拆下 上一个子节点的右连接器*/ .tree li:第一个孩子：：之前，.tree li:最后一个孩子：：之后{ 边界：0无； } /*将垂直连接件添加回最后一个节点*/ 李树：最后一个孩子：：之前{ 右边框：1px实心ccc； 边界半径：0 5px 0 0； -webkit转换：translateX1px； -moz变换：translateX1px； 转换：translateX1px； -webkit边界半径：0 5px 0； -moz边界半径：0 5px 0； 边界半径：0 5px 0 0； } 李树：第一个孩子：：之后{ 边界半径：5px0； -webkit边界半径：5px 0； -moz边界半径：5px 0； } /*从父级添加向下连接器的时间到了*/ .树ul：：以前{ 内容：； 位置：绝对；顶部：-12px；左侧：50%； 左边框：1px实心ccc； 宽度：0；高度：32px； z指数：-1； } 李树先生{ 边框：1px实心ccc； 填充物：5px10px； 文字装饰：无； 颜色：666； 字体系列：arial、verdana、tahoma； 字体大小：11px； 显示：内联块； 背景：白色； -webkit边界半径：5px； -moz边界半径：5px； 边界半径：5px； -webkit过渡：所有0.5s； -moz转换：所有0.5s； 过渡：均为0.5s； } .李树a+a{ 左边距：20px； 位置：相对位置； } .树李a+a：：之前{ 内容：； 位置：绝对位置； 边框顶部：1px实心ccc； 边框底部：1px实心ccc； 顶部：47%；左侧：-21px； 宽度：20px； 身高：6%； } /*是时候使用一些悬停效果了*/ /*我们还将把悬停效果应用于元素的沿袭*/ .树李a:悬停，.树李a:悬停~ul李a{ 背景：c8e4f8；颜色：000；边框：1px实心94a0b4； } /*悬停时的连接器样式*/ 树李a:悬停~ul李：：之后， 树李a:悬停~ul李：：之前， 树李a：悬停~ul：：之前， 树李a：悬停~ul：：之前 { 边框颜色：94a0b4； } a{ 宽度：130px； } 不停摆弄

.tree {
    white-space: nowrap;
}

.tree li {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    list-style-type: none;
    position: relative;
    padding: 20px 5px 0 5px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}