javascript - 使五个宽度为 25% 的左浮动元素继续 float 到屏幕外

Question

我目前有五个 <li>元素。每个<li>定义为 25% 宽度:

ul li {
    float: left;
    width: 25%;
}

并在包装器容器中定义:

#wrapper {
    position: absolute;
    width: 125%;
}

我想要做的是:让前四个元素出现在屏幕上，占据 100% 的宽度，并让最后一个元素漂浮在屏幕外。

注意:最终可以有超过五个元素。

我的经验是，虽然我的包装器设置为适合 5x25% = 125%，但最后一个元素“崩溃”了，第四个元素没有在屏幕上显示完整的 25%。

在这里 fiddle : http://jsfiddle.net/pJNAV/1/

Answer 1

正如你所拥有的:

#wrapper {
width: 125%;
}

你有 5 个元素，所以每个元素都是父元素的 20%，所以

ul li {        
    width: 20%;        
}

http://jsfiddle.net/pJNAV/2/