使最后一个元素占据剩余空间

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并删除float

来完成此操作

工作示例：

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