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

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在最后一个元素上overflow: hidden并删除float

工作示例：

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