明凯博客

关注网站技术,一个特立独行的程序员

ie下li标签中span加float:right换行问题解决方法

在IE6,IE7下使用标签时,在加入右浮动样式(float:right)后,会换行的bug解决方案:
bug案例:新闻列表中,为使时间右对齐,加右浮动产生换行

1
2
3
4
5
6
<ul>
<li><a href=“#”>测试</a> <span>2012-12-24</span></li>
<li><a href=“#”>测试</a> <span>2012-12-24</span></li>
<li><a href=“#”>测试</a> <span>2012-12-24</span></li>
<li><a href=“#”>测试</a> <span>2012-12-24</span></li>
</ul>

产生原因分析: Span本身虽然是内联元素,但加上浮动后它就变成了块级元素了,所以才会自动换行,浮动元素的顶端不能高于先于它出现的浮动元素或段落的顶端。

解决方案:
1. span和a标签交换位置

1
2
3
<ul>
    <li><span>2012</span><a>BEST SUSHI MENU</a></li>
</ul>

缺点:语义结构发生改变,不合逻辑。

2.a加左浮动,span加右浮动

3.使用IE hack 在span标签中加入只有IE6,7可以识别的样式

1
2
*margin-top:20px;
_margin-top:20px;

说明,使换行的部分根据margin-top再呈现出来。
4.最佳方案

1
2
li{position:relative;}
li span{position:absolute ;right:0px;}

注:在li标签中使用positon:relative,在li span中使用absolute绝对定位来使span内容重新定位。

, , , ,

相关文章

2 条评论 “ie下li标签中span加float:right换行问题解决方法

发表评论

电子邮件地址不会被公开。 必填项已用*标注