Javascript 使五个25%宽度的左浮动元素继续在屏幕外浮动

我目前有五个

元素。每个

都定义了25%的宽度：

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

并在包装容器中定义：

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

我想做的是：让前四个元素以100%的宽度出现在屏幕上，并让最后一个元素浮动在屏幕之外

注意：最终可能有五个以上的元素

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

在这里拉小提琴：

正如您所拥有的：

#wrapper {
width: 125%;
}

您有5个元素，因此每个元素都是父元素的20%，所以

ul li {        
    width: 20%;        
}

---

这意味着包装器将占据屏幕的125%，但元素将各占20%（数学上正确）。似乎可以在JSFIDLE上使用。

是否为

li

元素定义了任何边距/填充/边框？将

的宽度设置为
20%
，它们仍将占据
125%的宽度，
ul li {
    float: left;
    width: 20%;
}