0

我有以下 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/

4

2 回答 2

3

取下浮子。您也可以删除宽度。

li:last-child { float: none; }

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

于 2013-04-16T02:02:45.297 回答
1

您可以通过overflow: hidden在最后一个元素上使用并删除浮动来完成此操作

工作示例:

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

于 2013-04-16T02:04:22.803 回答