论坛首页 Web前端技术论坛

使用 Unordered Lists 制作的下拉菜单和树

浏览 22801 次
该帖已经被评为精华帖
作者 正文
   发表时间:2007-07-11  
to blueaqua:
我在IE6和Firefox2上测试,都没有你说的问题。
你自己测试过吗?请你把截图发上来,这里高手众多,一起来帮你解决这个问题。

另外小声问一下:在你确信CSS没有能力达到到你的目标之前,你尽力尝试过吗?你花过时间努力学习CSS吗?
0 请登录后投票
   发表时间:2007-07-12  
附件1是测试页面,附件2是IE中的效果,附件3是FireFox中的效果。我们可以对比一下,看看页面在两种浏览器中的显示差别。
我尝试过各种CSS样式,也在很努力的学习CSS,但限于水平,目前还没有找到解决方案,或许高手们可以帮我解决这个问题,谢谢!
  • 大小: 16.1 KB
  • 大小: 14.1 KB
0 请登录后投票
   发表时间:2007-07-12  
要实现的效果是这样的:
图片与文本显示在同一行上,所有div及span根据其内容自适应,无需指定宽度。
当内容超过顶级div设置的宽度和高度时,顶级div自动显示滚动条。
0 请登录后投票
   发表时间:2007-07-12  
请教一下,如果menu和tree的层次较深(未知),相应的css如何控制到某个item或node呢?

两层:
ul.dropdown li ul li {
    display: block;
}

N层?
0 请登录后投票
   发表时间:2007-07-12  
to blueaqua:
你看看这样可不可以,例子见附件。
不要设置white-space: nowrap;,这个样式的目的不就是试图将文字显示在一行吗?我们可以用其他方式来模拟这个效果。为包含img和span的div设置以下样式:
height: 50px;
line-height: 50px;
overflow: hidden;
就是将div的height和line-height设置为相同值,并且将overflow设置为hidden,这样就只显示一行了。

当然,如果是复杂的多层嵌套的Tree组件,还是用table来实现比较容易。我两年多前贴这篇文章只是为了给大家提供一个新的思路。现在也完全没有必要自己实现Tree组件了,因为Ext等组件库中都有理想的实现,一两年后,可能浏览器本身也会提供标准的Tree组件。
0 请登录后投票
   发表时间:2007-07-12  
谢谢dlee!但设置overflow: hidden后,文字中的超长部分会被隐藏,看不到全部的文字了,这并不是我想实现的效果。 :-)
0 请登录后投票
   发表时间:2007-07-12  
to blueaqua:
这确实很难做到,因为即使解决了white-space: nowrap;使得span落到下面一行的问题,最终和img位于同一行了。这时候也只能触发直接包含这个img和span的div出现水平滚动条,而不是触发更外层的div出现水平滚动条。这个问题暂时搁置在这里,等将来有了思路后再来讨论。
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics