ie中使用float:right出现换行的解决办法

来源:互联网 发布:家装预算软件 编辑:程序博客网 时间:2024/05/16 18:01


今天写css,发现了ie的一个bug,真的很令人烦恼啊,下面就来说说是什么问题。

有段html代码:

<div>神奇的世界<span><a href="#">More..</a></span></div>

css:

span { float:right; }

看了代码就知道,我想达到的效果是一个栏目标题栏,“神奇的世界”字样在左边,“More..”字样在右边。

但是,有时就是事与愿违啊,在ff和chrom中都能达到想要的效果,但在ie中就出问题了,会出现“More..”字样在右边,但在“神奇的世界”字样的下面一行,就是说换行了,这个问题要解决。

上网搜了下,解决办法是有的:

1.将html代码改为:

<div><span><a href="#">More..</a></span>神奇的世界</div>

也就是你将两个字样交换下位置,这样就没问题,但是在理解上存在问题(以前我就看到过这种写法,当时就觉得很费劲啊。。。现在知道了。。。汗)

2.html不变,调整css为:

span { float:right; }

a {float:left; }

这个方法我试过,但好像不行,有网友说可以,不知道为什么。。。。

3.还是只调整css,听说这个方法最好:

div { postion:relative; }

span { position:absolute; right:0; top:0; }

这个方法我试了,完全可行。。。。

最后,希望ie早点那啥。。。。


转自:http://hi.baidu.com/hoverinsky/item/599c7011b39894fd9c778a82