1

在此处输入图像描述

我有一组 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 的宽度减去填充。

将#tree width 设置为 auto 只会在屏幕较窄时生成一个包裹的 ul.tree。

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

#tree 设置为 Auto 的实时示例可以在http://www.rjt.org.uk/m/example/index.html看到

4

2 回答 2

1

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

document.getElementById('tree').offsetWidth;

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

display: block;
float: left;

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

于 2013-10-11T16:20:38.907 回答
0

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

于 2013-10-11T16:20:32.233 回答