Html CSS页边距问题，带有中心div的浮动动态元素

我正在编写一个Wordpress主题，我遇到了一个问题：在一个居中的div中显示5个相邻的动态帖子缩略图（左浮动），右边距为20px

这里有一个页面链接：（当你点击顶部导航中的“Les Prèfs”时，问题就出现了：顶部菜单和下面的内容向左移动了10px。）

问题是：

• 该站点的宽度为960像素，位于中心。（#包装纸）

• 5个动态生成的后期缩略图宽176像素，每个缩略图的右边距为20像素。（#首选拇指）

• 我为缩略图选择了这些尺寸，我想我会有5个缩略图，它们之间有4个边距，加起来是960px

• 但事实是，每行的最后一个缩略图也有20px的边距，因此整个加起来是980px（比站点宽20px）

• 我找到的每行显示5个缩略图的唯一解决方案是为缩略图div（#prefs）指定一个980px的宽度

• 然而，这似乎引发了其他内容的中心化问题，这些内容不再以960px站点宽度为中心，而是以980px缩略图div为中心

• 因此，每当我点击“lesprefs”来显示缩略图（使用一个小小的jquery函数），整个内容都会移动到左侧的10px

整个事情解释起来有点复杂。但我觉得肯定有一个简单的CSS解决方案来解决我的问题。可能与溢出属性、显示属性或类似的内容有关。。。我只是对CSS还不够好，还没有找到解决方案，而且我的问题非常具体，我还没有在网上找到答案

我觉得问题在于CSS的以下几行：

#wrapper {
width: 960px;
height: auto;
margin: 0 auto 0 auto;
}

#prefs {
width: 980px;
height: 390px;
margin: 69px 0 0 0;
}

.prefs-thumbs {
position: relative;
float: left;
margin: 0 20px 20px 0;
}

任何帮助都将不胜感激。

---

干杯

您注意到10px的移动，因为页面高度正在增加，并且浏览器正在添加一个水平滚动条

我对此问题的首选解决方案是始终使用以下CSS显示水平滚动条（适用于所有现代浏览器）：

---

我看到居中对齐向左移动，因为页面右侧出现垂直滚动。

首先要解决的是块中元素的实际匹配

您需要删除每行最后一个元素的右边距

因此，要么将一个类设置为最后一项，该项使用

marign right:0覆盖边距，要么（对于现代浏览器）使用

.prefs-thumbs:nth-child(5n+1){
    margin-right:0;
}

参考：

您还需要从添加的图像中删除边框，而不是176像素，每个图像占用180像素（周围有2个像素边框）

所以，先纠正你的数学

移动内容的问题是，一旦内容超过页面高度（如预期），就会出现滚动条。一个解决方案是保持垂直滚动条alwats可见，正如@wsanville在他的回答中所建议的那样。
Aaaww！滚动条！明显地非常感谢，谢谢你，加布！我不熟悉第n个child伪类。看起来您链接到的整个文档在未来的项目中可能非常有用。我要研究一下。
.prefs-thumbs:nth-child(5n+1){
    margin-right:0;
}