当前位置：首页 → 问答吧 → IE6 中 float:right 后换行的问题

IE6 中 float:right 后换行的问题

时间：2010-02-01

来源：互联网

像这样的
<h1>标题<span>更多</span></h1>

想显示成

免费内容:

标题更多

可是如果把span 设为 float:right, 在该死的IE6里就会这样：

免费内容:

标题
　　更多

每次做这个都很郁闷，有种方法是把更多[/i] 和 [i]标题位置颠倒过来，可就为了一个该死的BUG把完好的语义破坏了值得吗

还有种办法是用绝对定位，但是不知道是不是自己心理作用，绝对定位多了是不是不好？尤其是如果是在用列表的情况下，比如这样的：

免费内容:

<ul>
<li><a href="#">新闻新闻新闻</a> <span>2012-12-24</span></li>
<li><a href="#">新闻新闻新闻</a> <span>2012-12-24</span></li>
</ul>

用绝对定位的方式好吗？
大家平时都怎么解决这个问题呢？有没有其他办法呢？谢谢啦。

作者: Fanbin 发布时间: 2010-02-01

我的方法是

<ul>
<li><a href="#">新闻新闻新闻</a> <span>2012-12-24</span></li>
<li><a href="#">新闻新闻新闻</a> <span>2012-12-24</span></li>
</ul>

ul li a{float:left}
ul li span{float:right}

作者: guangxu1202 发布时间: 2010-02-01

作者: rao3324180 发布时间: 2010-02-01

二楼的方法很不错，以前我一直反着写，这回有办法了，不知道还存在BUG不。。。

作者: dragonbanner 发布时间: 2010-02-01

二楼的方案我试了一下，好像得设置为display:block 才可以，不然都挤一起去了
最后还是选择了用三楼position的方式，感觉良好

作者: Fanbin 发布时间: 2010-02-01

感觉反着写挺好

作者: wfb927 发布时间: 2010-02-01

我的方法

作者: irlvirus 发布时间: 2010-02-01

两个都添加浮动就不会换行了

作者: ada313 发布时间: 2010-02-01

看见这个主题漂在前面很久，进来才发现是这个问题：
”绝对定位多了不好“，这句话暂时没有依据哦，确实是心里作用了！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>列表</title> <style type="text/css"> body{font-family:verdana;} .normal_list{border:solid 1px red;width:500px;font-size:12px;} .normal_list ul{margin:0;padding:0;list-style:none;line-height:23px;margin:12px;} .normal_list ul li{position:relative;border-bottom:dashed 1px red;zoom:1;} .normal_list ul li span{position:absolute;right:8px;top:0;} .normal_list h2{font-size:130%;margin:0;padding:10px;background:#eee;position:relative;} .normal_list h2 a.more{position:absolute;right:10px;top:8px;font-size:80%;} </style> </head> <body> <div class="normal_list"> <h2>热看电影<a href="#" class="more">更多>></a></h2> <ul> <li><a href="#">阿凡达就是好看</a><span>[2010-01-28]</span></li> <li><a href="#">阿凡达就是好看</a><span>[2010-01-28]</span></li> <li><a href="#">阿凡达就是好看</a><span>[2010-01-28]</span></li> <li><a href="#">阿凡达就是好看</a><span>[2010-01-28]</span></li> <li><a href="#">阿凡达就是好看</a><span>[2010-01-28]</span></li> </ul> </div> <hr /> <div class="normal_list" style="width:300px;"> <h2>热看电影<a href="#" class="more">更多>></a></h2> <ul> <li><a href="#">阿凡达就是好看</a><span>[2010-01-28]</span></li> <li><a href="#">阿凡达就是好看</a><span>[2010-01-28]</span></li> <li><a href="#">阿凡达就是好看</a><span>[2010-01-28]</span></li> <li><a href="#">阿凡达就是好看</a><span>[2010-01-28]</span></li> <li><a href="#">阿凡达就是好看</a><span>[2010-01-28]</span></li> </ul> </div> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 yoom 于 2010-2-1 21:13 编辑 ]

作者: yoom 发布时间: 2010-02-01

学习了！

作者: amycess 发布时间: 2010-02-03

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>标题2010-2-1</title> </head> <style type="text/css"> ul { width:300px; height:auto; margin:20px auto; padding:5px; border:1px blue solid; list-style:none}; ul li { border-bottom:1px green solid; margin:3px auto} ul li a { float:left}; ul li span { float:right}; </style> <body> <ul> <li><a href="#">标题</a><span>2010-2-1</span></li> <li><a href="#">标题</a><span>2010-2-1</span></li> <li><a href="#">标题</a><span>2010-2-1</span></li> <li><a href="#">标题</a><span>2010-2-1</span></li> <li><a href="#">标题</a><span>2010-2-1</span></li> <li><a href="#">标题</a><span>2010-2-1</span></li></ul> </body>
提示：您可以先修改部分代码再运行

作者: lijia2202 发布时间: 2010-02-03

我觉得都a与span都浮动不好，，因为这样的话li之间在ie6里会出现几px的空白，，是ie的bug

span用绝对定位也不好，因为如果标题很长的会跑到span的下面，，他们会重合，当然你也可以在li里padding-right把这个距离留出来。但是绝对定位，ie里要定宽和高或者zoom:1，这样的话，又影响他的通用性了或者多用了hack

我一般都这么用<span style="float:right"></span><a href="">xxxxx</a>
这样就不会出来重合的了，，也不会引起来ie的bug，又可以多地方重用，，

这么放也不影响语义的，有的人只为了看新闻(没有新旧之说)，有的人却是要看最新的新闻，，目地不一样语义也会跟着变化的

[ 本帖最后由 DellGrass 于 2010-2-3 17:40 编辑 ]

作者: DellGrass 发布时间: 2010-02-03

给它们换个位置，这个BUG就解决了
<div > <a href="haha" style="float:right">更多</a>最新评论</div>

作者: kaigx 发布时间: 2010-09-13

把浮动的元素放到前面就ok了

作者: wyysf 发布时间: 2010-09-13

列表的话
标题和时间谁在前谁在后似乎都能说得过去吧。

作者: singlesoho 发布时间: 2010-09-13