CSS绝对定位元素受窗口边界影响布局错乱如何解决

你遇到的换行问题核心原因是：未显式设置宽度的绝对定位元素，默认最大可用宽度受视口边界限制。当你通过JS把元素left值设置得过大时，元素从left位置到视口右边界的剩余宽度不足以容纳所有按钮，哪怕设置了overflow: hidden，也只会裁剪溢出内容，不会阻止元素本身宽度被压缩，最终导致内部按钮换行。

只需要给定位容器加两个CSS属性即可实现预期效果：

#container{
  overflow: hidden;
  position: absolute;
  border: 1px solid gray;
  left: 0;
  right: auto;
  /* 新增属性 */
  white-space: nowrap;
  width: max-content;
}

属性作用说明：

• white-space: nowrap：强制容器内的按钮（默认是行内块元素）始终保持水平排列，不会自动换行
• width: max-content：让容器宽度始终等于内部内容的固有总宽度，不会被视口右边界压缩，超出视口的部分会直接被overflow: hidden裁剪，靠近边界时只会隐藏显示不下的内容，不会改变内部布局。

如果需要兼容不支持max-content的老旧浏览器，可以直接给容器设置一个足够容纳所有按钮的固定宽度（比如根据按钮总宽设置width: 280px，数值按需调整即可），搭配white-space: nowrap使用效果完全一致。

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