Question

跪求CSS高手！！！ DWZ框架下左侧菜单栏显示水平滚动条的问题

知道DWZ框架的请进。
如题，我希望在DWZ框架左侧菜单栏添加横向滚动条，因为我的菜单名字太长了。默认情况下DWZ菜单栏是没有水平滚动条的（如图1），因为DWZ中有个id为splitbar的div，可以拖动它来拉宽菜单栏。但是需求上又要求加个横向菜单栏，没办法。。。。
为了这个需求我捣鼓了大半天，我在DWZ框架的index.html中添加了如下代码：
.tree div { display:inline-block; white-space: nowrap; overflow: visible; float:none; height:22px; width:100%; word-wrap : normal;} （好像主要是display、white-space、overflow这三个属性起作用）
最后在FF和Chrome上显示没有问题（如图2），但在IE上就出问题了（如图3），
后来我发现把上面的width属性换一个很大的值能让菜单的名字显示全的宽度，那么也能显示滚动条，但这样的话就不能做到宽度动态适应，而且若是以后出现更长的菜单名字，显示还是会出问题，若是宽度给得过长水平滚动条的滚动进度也会给人感觉不好。
跪求CSS高手帮帮忙啊，最好能给我讲讲原理，对CSS一知半解啊，没有好好系统地研究过，都是临时要用的时候上网搜答案。。。

图1

图2

图3





Answer 1

猜测：
看看你的树容器是不是有一个 overflow-x:hidden; 有的话直接去掉问题就解决了（觉得你的js应该控制了这里了）

一般解决方法：
1.overflow 设置为auto，

2.tree应该和出滚动条的元素不是同一个，那么 tree应该是孩子，他的父亲出滚动条。
3.设置tree的宽度爱多大多大（写死还是js获取还是怎么滴就看你自己了）。
4.给父亲设置宽度（你说的能够拖拽的应该就是这个，如果js里写死了，你自己改js）

总结：overflow为auto时，会自动判断孩子的“实际”宽高是否超出了自己的宽高，然后根据情况出现横向或水平滚动条；

tip：overflow-x;和overflow-y;可以分别控制水平和竖直方向的超出文本的表现。

望采纳，有问题可以继续问