Css 查找无序列表树的实际宽度

我有一套CSS，它允许使用无序列表绘制简单的家谱

只要ul.tree的宽度小于屏幕的宽度（此时它进行了不整洁的包装），这种方法就可以很好地工作。为了避免这种情况，我使用了以下方法：

#treewrapper {
 margin: 10px; padding: 20px;  width: auto;  white-space: nowrap; overflow-x: scroll;   overflow-x: scroll;
}
#tree {width: 5000px;} 

这意味着，即使树的实际宽度比树的当前宽度窄，也会得到一个巨大的树面积

我的第一个想法是找到ul元素的宽度，并在呈现页面后使用javascript更改ul.tree的宽度以匹配，但当我查看ul的宽度时，它似乎是#tree的宽度减去填充

当屏幕较窄时，将#tree width设置为auto只会产生一个包裹的ul.tree

在CSS（或javascript）中是否有一种简单的方法可以使#树足够宽

---

在

中可以看到#tree设置为Auto的实例，更改

#treewrapper

、

.tree

和

的宽度。tree ul

为

宽度：100%。应该可以解决您的问题。
将
#treewrapper
、
.tree
和
.tree ul
的宽度更改为
宽度：100%。应该可以解决您的问题。
获取宽度的方法是使用javascipt和
.offsetWidth
。以下是一个例子：

document.getElementById('tree').offsetWidth;

尽管您可以通过以下方式使用css包含填充：

display: block;
float: left;

因为当您使用块元素时，它也会选择填充
获得宽度的方法是使用javascipt和
.offsetWidth
。以下是一个例子：

document.getElementById('tree').offsetWidth;

尽管您可以通过以下方式使用css包含填充：

display: block;
float: left;

因为当您使用块元素时，它也会选择填充
我不知道是否将此作为答案发布，但是添加
.tree ul{padding left:0}
（要删除默认浏览器填充），我可以在
.tree>ul>li:first child
（包含整个树的主li）上看到正确的宽度我不知道是否将此作为答案发布，但是添加
.tree ul{padding left:0}
（要删除默认浏览器填充），我可以在
.tree>ul>li:first child
（包含整个树的主li）上看到正确的宽度