IE6、IE7：ul li a span 组合中 span{ float：right}浮动后日期内容往下行移动总结

来源：互联网发布：大隅级两栖攻击舰数据编辑：程序博客网时间：2024/05/01 23:54

环境代码如下：

body, ul{margin:0; padding:0;}
ul{width:300px; margin:0 auto; background:#d8d8d8;}
span{background:green; float:right;}
li{background:yellow; }
</style>
</head>
<body>
<ul>
<li><a href="#">网易</a><span>2015/09/21</span></li>
<li><a href="#">百度</a><span>2015/09/21</span></li>
<li><a href="#">腾讯</a><span>2015/09/21</span></li>
<li><a href="#">新浪</a><span>2015/09/21</span></li>
</ul>

</body>

以上代码在IE6、IE7中时间 “2015/09/21” 会稍微往下移动一行(目测大概一行吧)。

IE6、IE7如下显示（IETester）：

这个问题以前也解决过一次，后来通过百度把问题解决了。但是最终导致问题发生的原因却没有弄明白，导致像我这样的新新手过了一段时间就把解决办法给忘记。

不得已还是得找回百度。通过这次再次相遇，好好总结一次，以备下次又忘记。

1、把 span 标签放在 a 标签前可以把让两个元素在同行显示。（但是好像把 span 放 a 前面总感觉怪怪的。）

2、通过 positon 定位：(span 标签还是在 a 标签后面，如上面代码一样，只是加了以下相关CSS属性)

首先我们给 span 的父标签 li 加上 position:relative;

然后 span 自身 position:absolute; right:0; top:0;

这样两个元素也可以在同行显示。

3、通过 a float:left; span float:right; 也可以实现两元素在同行高度显示。

在此做个笔记实录，预防忘记。再次证明，解决问题最直接的办法是了解问题的根源。

问题实质存在的原因：

在同一容器中，存在 A 、B 两个行内元素时，并且 B 在 A 后面。如果 B float:right ，而A没有float，那么 B 将受到 A 的排斥，最终在下一行显示(有人说这个时候 B 会变成块级元素？！我没有找到证明的办法)。鉴于这个问题的存在，我们可以运用上面说到3中方法实现两个元素在同行同高度显示。

0 0