我有一组 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 元素的宽度并更改 ul.tree 的宽度以在页面呈现后使用 javascript 进行匹配,但是当我查看 ul 的宽度时,它似乎是 # 的宽度树减去填充。
将#tree width 设置为 auto 只会在屏幕较窄时导致包裹 ul.tree。
在 CSS(或 javascript)中是否有一种简单的方法可以使 #tree 足够宽?
可以在http://www.rjt.org.uk/m/example/index.html 看到#tree 设置为Auto 的实例。
最佳答案
获取宽度的方法是使用javascipt 和.offsetWidth
。这是一个例子:
document.getElementById('tree').offsetWidth;
尽管您可以使用 css 来包含填充,方法是:
display: block;
float: left;
因为当你使用 block 元素时它也会选择填充
关于css - 查找无序列表树的实际宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19322574/