如何使列表左移并与960px宽度的顶部栏对齐？

问题排查与解决思路 #

嘿，我来帮你搞定这个对齐和留白的问题！首先咱们先理清楚核心矛盾：你要让列表和顶部960px的容器完全对齐，但当前方块尺寸加外边距的组合，总宽度没刚好填满960px，才会出现右侧留白。咱们一步步来解决：

1. 先把盒模型的坑填上 #

默认情况下CSS的box-sizing是content-box，这意味着你设置的width:159px只是方块内容的宽度，如果之后给方块加了边框、内边距，实际宽度会比159px大，直接打乱你的尺寸计算。先给全局元素统一设置盒模型，避免这种意外：

* {
  box-sizing: border-box;
}

这样元素的宽度会包含内容、内边距和边框，计算起来就精准多了。

2. 精确计算方块尺寸和间距 #

你说每个方块是159px加1px外边距，咱们算笔账：如果要填满960px的容器，假设一行放6个方块：

• 如果每个方块右侧加1px外边距，6个方块会有5个间距，总宽度是159*6 + 1*5 = 959px，还差1px，这就是你看到的右侧留白！

解决这个有两种简单方式：

方式一：用Flexbox自动分配（推荐）

Flexbox是现在布局的首选，用gap代替margin，不用手动处理最后一个元素的间距，浏览器会自动帮你算：

/* 假设你的列表容器是#list-wrap */
#list-wrap {
  width: 960px;
  margin: 0; /* 去掉auto就能让列表靠左对齐，和顶部栏左边缘齐平 */
  display: flex;
  gap: 1px; /* 这个就是方块之间的间距，不用给每个方块加margin了 */
}

.list-item {
  /* 自动计算每个方块的宽度：总宽度减去5个间距，再平分给6个方块 */
  width: calc((960px - 5*1px) / 6);
}

要是你不纠结159px的精确宽度，直接给.list-item加flex: 1，它会自动把剩余空间均分，完全填满容器，连计算都省了！

方式二：用浮动布局（如果习惯老方法）

如果是用浮动排列，记得给最后一个方块去掉右侧外边距，再给第一个方块加个左侧外边距补全那1px：

#list-wrap {
  width: 960px;
  overflow: hidden; /* 清除浮动，避免容器塌陷 */
  margin: 0; /* 靠左对齐 */
}

.list-item {
  float: left;
  width: 159px;
  margin-right: 1px;
}

.list-item:first-child {
  margin-left: 1px;
}

.list-item:last-child {
  margin-right: 0;
}

这样总宽度就是159*6 +1*6= 954+6=960px，刚好填满容器，不会有留白。

3. 确保列表和顶部栏对齐 #

你的#container是960px居中的，只要把列表容器放在#container里面，或者给列表容器也设置width:960px，然后去掉margin:0 auto改成margin-left:0，就能让列表靠左对齐，和顶部栏的左边缘完全对齐了。

最后提醒 #

如果还是有问题，检查一下列表容器有没有额外的padding或者border，这些都会占用宽度，导致总尺寸超了或者不够。用浏览器的开发者工具（F12）选中列表容器，看一下它的实际宽度和内部元素的尺寸，就能快速定位问题啦！

内容的提问来源于stack exchange，提问作者DanielJudah