做网站中,最常的莫过于显示最新的10条信息了,一般的形式如下:
<li><a href="">标题内容</a><span class=time>[2009-4-1]</span></li>
这样的列表,但我们希望,标题显示在左边,而time浮动到右边,然而实际上却出现了time在第二行右边显示,这是因为:
当非float的元素和float的元素在一起的时候,如果非float元素在先,那么float的元素将被排斥。
针对这种情况,前人给出了一些办法,最好的是:
1、把要float的元素放在非float元素的前面,并设置time:float:right即:
<li><span class=time>[2009-4-1]</span><a href="">标题内容</a></li>
2、把a与span都应用float属性,一个float:left一个float:right实现了预期排列(但这里有一个BUG即,如果在</a> <span.....中间有个这样的空格,就会出错,可能是这东东有连接的作用)
这里给出另一种思路,特别对于,不想或不能把span内容到a内容前面的,这就是:
li:text-align:right
a:float:left
就搞定了,思路是把父级BOX设置内容右对齐(把time放到右边),再把<a>左对齐,就OK了
以前我们一直是在如果让span:float:right起作用,而现在就放弃它了,换成如果把a放到左边