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

Question

我有一组CSS，它允许使用无序列表绘制简单的族树。

只要ul.tree比屏幕的宽度窄，它就可以很好地工作。为避免这种情况，我使用了以下内容：

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

这意味着即使树实际上比#treewrapper的当前宽度窄，也会得到一个巨大的#tree区域。

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

将#tree width设置为auto只会在屏幕较窄时导致包装的ul.tree。

CSS（或javascript）中有一种简单的方法可以让#tree足够宽吗？

#tree设置为自动的实例可以在http://www.rjt.org.uk/m/example/index.html

看到

Answer 1

获取宽度的方法是使用javascipt和.offsetWidth。这是一个例子：

document.getElementById('tree').offsetWidth;

虽然你可以使用css来包含填充：

display: block;
float: left;

因为当你使用块元素时它也会拾取填充

Answer 2

将#treewrapper，.tree和.tree ul的宽度更改为width:100%;。应该解决你的问题。