float:right時換行問題新解,解決float塊元素在非float塊元素中浮動問題

做網站中,最常的莫過于顯示最新的10條資訊了,一般的形式如下:

<li><a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >标題内容</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="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >标題内容</a></li>

2、把a與span都應用float屬性，一個float:left一個float:right實作了預期排列（但這裡有一個BUG即，如果在</a>&nbsp;<span.....中間有個這樣的空格，就會出錯，可能是這東東有連接配接的作用）

這裡給出另一種思路，特别對于，不想或不能把span内容到a内容前面的，這就是：

li:text-align:right

a:float:left

就搞定了，思路是把父級BOX設定内容右對齊（把time放到右邊），再把<a>左對齊，就OK了

以前我們一直是在如果讓span:float:right起作用，而現在就放棄它了，換成如果把a放到左邊