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

===============>>#1 票数:3 已采纳

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

li:last-child { float: none; }

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

===============>>#2 票数:1

您可以使用以下方法完成此操作overflow: hidden在最后一个元素上overflow: hidden并删除float

工作示例:

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

  ask by Majid Laissi translate from so

未解决问题?本站智能推荐: