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

【问题标题】：Make five left floating elements with 25% width continue floating offscreen使五个宽度为 25% 的左浮动元素继续浮动到屏幕外
【发布时间】：2014-02-19 00:47:19
【问题描述】：

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

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

并且在包装容器中定义：

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

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

注意：最终元素可能超过五个。

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

在这里提琴： http://jsfiddle.net/pJNAV/1/

【问题讨论】：

您是否为li 元素定义了任何边距/填充/边框？
设置<li>s的宽度为20%，它们仍然会占用125%的宽度，

标签： javascript html css

【解决方案1】：

如你所愿：

#wrapper {
width: 125%;
}

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

ul li {        
    width: 20%;        
}

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

【讨论】：

【解决方案2】：

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

这意味着包装器将占据屏幕的 125%，但每个元素将占据 20%（数学上正确）。似乎可以在 jsFiddle 上工作。

【讨论】：