製作的最後一個元素佔據的剩餘空間

Question

我有以下HTML：

<ul style="width: 100%; height: 33px;"> 
    <li style="height: 33px; width: 34px;"> 
     <div>TEST</div> 
    </li> 
    <li style="height: 33px; width: 34px;"> 
     <div>TEST</div> 
    </li> 
    <li style="height: 33px; width: 34px;"> 
     <div>TEST</div> 
    </li> 
    <li style="height: 33px;"> 
     <div>LAST</div> 
    </li> 
</ul> 

和CSS：

ul { 
    list-style: none outside none; 
    margin: 0; 
    overflow: hidden; 
    padding: 0; 
    border: 1px solid red; 
} 

li { 
    float: left; 
    list-style: none outside none; 
    margin-bottom: 8px; 
    padding-left: 0; 
    padding-right: 4px; 
    border: 1px solid blue; 
} 

而且我想佔據其餘地方的最後一個元素，所以它的對齊在頁面的右側。

如何做？

謝謝

這裏有一個小提琴：http://jsfiddle.net/PKw9k/

Answer 1

刪除浮動。您也可以刪除寬度。

li:last-child { float: none; } 

http://jsfiddle.net/PKw9k/1/

Answer 2

可以使用的最後一個元素上overflow: hidden和去除浮

工作示例實現這一點：

http://jsfiddle.net/PKw9k/2/