XML/HTML代码
- <p style="width: 400px; height: 20px; text-align: left;">新闻新闻新闻<span style="float: right">2007-08-18</span><span style="clear: both;"></span></p>
- <p style="width: 400px; height: 20px; text-align: left;"><span style="float: right">2007-08-18</span>新闻新闻新闻</p>
效果:
原因:
当非float的元素和float的元素在一起的时候，如果非float元素在先，那么float的元素将被排斥
也就是说，你的span是float:right，但是你文本还是float:none
如果要让两者占据同一行:
- 要么你把span先于文本显示 ：<span style="float: right">2007-08-18</span> （示例第3行）
- 要么把文本也设成float：<span style="float: left">新闻新闻新闻</span>
个人总结：
在我个人的使用中发现这个问题，通过上述办法可以解决，但是有时候碰到没有开源的cms，去修改代码显然是不可能的，通过我的发现，还可以通过以下办法解决：
在span 的样式中，加入 position:absolute;right: 4in; 主要是红色的部分就可以解决问题了。