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

标签 css

enter image description here

我有一组 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/

相关文章:

css - AngularJS ng-grid 布局错误;在我看来像是 CSS 的东西

javascript - 有标签时最大化表格中的选择宽度

javascript - 有没有更好的方法来制作具有随机开始和结束动画的复杂动画?

javascript - 为什么我的菜单没有下拉菜单?

php - 使用 PHP 包含 <head> 来提供 CSS 会产生混合结果

html - CSS:用省略号截断标签,但始终显示 'required indicator'

javascript - 将 ng-href 添加到 angularjs 中的按钮会更改按钮内文本的位置

html - 如何点击模糊的太阳?

javascript - JQuery printThis 和 Style 属性

php - 用php创建css文件