AngularJS应用：固定左侧边距时如何维持容器左右边距相等？

首先咱们得先理清问题根源：你原来的写法里，容器宽度是固定百分比92.5%，左边距用了静态的9.5rem，右边距设为auto。这种情况下，右边的自动边距是视口总宽度减去容器宽度再减去左边距的结果，只有当9.5rem刚好等于(100% - 92.5%)/2时，左右边距才会相等——这就是为什么只有在特定视口尺寸下才对齐的原因。

既然你必须使用静态的左侧边距值，推荐用CSS的calc()函数来动态计算容器宽度，这样能强制让左右边距保持一致。具体做法如下：

1. 把容器的宽度设置为calc(100% - 2*你的左侧边距值)，也就是总视口宽度减去左右两边的静态边距
2. 同时把左右边距都设为你需要的静态值，取消auto

修改后的CSS代码示例：

.container {
  width: calc(100% - 19rem); /* 2 * 9.5rem，保证左右边距各为9.5rem */
  margin: 0 9.5rem;
}

为什么这个方法有效？ #

calc()会实时计算容器的可用宽度，不管视口怎么变化，容器都会自动占满「视口宽度减去两边固定边距」的空间，这样左右边距始终都是你设定的9.5rem，视觉上就不会再出现失衡的情况了。

额外提醒：如果你的侧边导航是固定定位（position: fixed），这个方案完全适用；如果是浮动定位，可能需要额外调整布局，但核心思路还是用calc()来确保容器宽度和边距的关联。

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