li中包含a和span时的错位问题
摘要：li、a、span三者混合使用的情况最为常见的就是新闻列表中标题和时间的混合显示，首先我们先定义一下css样式 a{ width: 350px; height: 25px; display: block; overflow: hidden; text-decoration: none;}span{
li、a、span三者混合使用的情况最为常见的就是新闻列表中标题和时间的混合显示，首先我们先定义一下css样式
a{ width: 350px; height: 25px; display: block; overflow: hidden; text-decoration: none;}
span{ float: right;}
如果html的内容写成这样
<li><a href="www.csshello.com">更多知识请访问csshello.com</a><span>2013-09-18</span></li> <li><a href="www.csshello.com">更多知识请访问csshello.com</a><span>2013-09-18</span></li> <li><a href="www.csshello.com">更多知识请访问csshello.com</a><span>2013-09-18</span></li>
那么运行结果就会出现span里面的日期窜到下一行的情况，如下：
但是如果我们把html中的a和span的位置交换一下变成这样
<li><span>2013-09-18</span><a href="www.csshello.com">更多知识请访问csshello.com</a></li> <li><span>2013-09-18</span><a href="www.csshello.com">更多知识请访问csshello.com</a></li> <li><span>2013-09-18</span><a href="www.csshello.com">更多知识请访问csshello.com</a></li>
那么运行的效果就是正确的，如下：
原因是span本身为内联元素，加上浮动就变成了块级元素了，所以才会自动换行，因为浮动元素的顶端不能高于先于它出现的浮动元素活段落的顶端，但前提是span的样式要写成{float:right;}
也可以用绝对定位来写
li{position:relative;}
li span{position:absolute; right:0; top:0;}
然后进行适当的调整就可以实现相同的效果了。
