IE6、7、8中css给span加float:right右浮动后内容换行下移

问题:在li里面加span,想要做到一行之内浮动(如图A),结果出现错误 span换行(如下图B)。
图A:我们想要的效果图
图A:我们想要的效果图
图B:得到的错误效果图
图B:得到的错误效果图

前提: li span {float:right;}
如果这么写: <li>逸悦轩<span>2012.08.15</span></li>
这个日期就会窜到下一行去。
而如果这样: <li><span>2010.10.15</span>逸悦轩</li>
日期和文字就会同行显示。

问题出来了,如何给 span 定义属性让他能够在第一种 html 写法下不换行?

当初来看,比较诡异的现象仔细分析一下,原来是这样 Span 本身虽然是内联元素,但加上浮动后它就变成了块级元素了。所以,才会自动换行。浮动元素的顶端不能高于先于它出现的浮动元素或段落的顶端。

解决方案有3种:

  1. 将右浮动的 SPAN 元素调整到所有非浮动 SPAN 元素之前;

  2. 使用绝对定位模拟右浮动;
    上面的例子应该:li{position:relative;} li span{position:absolute ;right:0px;}

  3. 使用 IE hack 专门在IE6 IE7 中设置负的上外边距

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值