itRef.cn技术参考网站

当前位置: 主页 > CSS >

诡异的li的list-style样式

时间:2010-06-03 20:04来源:未知 作者:adm_ref 点击:
在以前页面制作的时候碰到一种情况,需要把类似这样的内容进行布局 1. 问题1 答:这个是回答的内容,内容长度不确定,可能是一行,也可能是两行。 2. 问题2 答:这个是回答的的内容。。。 要求: 1. “答:”与回答的内容分成两列 2. 使用div CSS,不使用tab

在以前页面制作的时候碰到一种情况,需要把类似这样的内容进行布局

1. 问题1
答:这个是回答的内容,内容长度不确定,可能是一行,也可能是两行。
2. 问题2
答:这个是回答的的内容。。。

要求:

1. “答:”与回答的内容分成两列
2. 使用div CSS,不使用table布局

当使用如下HTML结构时,

  1. <li><span class="l">答:</span><span class="r">这个是回答的内容,内容长度不确定,可能是一行,也可能是两行。</span><li> 

和使用样式

  1. li{line-height:22px;background-color:#00FF00;border:1px solid #0000FF;position:relative;list-style:none outside none;}  
  2. .l{display:block;position:absolute;width:36px;}  
  3. .r{display:block;padding-left:36px;} 

时,在IE8和FF都可以得到理想的效果,但在IE6、IE7下却会出现这种情况:


 

而当使用p,或dd来构成HTML结构时,却不会出现这种情况。究其原因,应该是在IE6、IE7中由于列表项图片的默认高度原因导致,所以以后如出现这种布局需要时还是改用p或dd为好。

实例:


 提示:您可以先修改部分代码再运行

 

(责任编辑:wiwi) 转载请注明 来源于itRef.cn技术参考网站:
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
栏目列表
推荐内容