错误的网页水平滚动弄乱了布局答案

【问题标题】：Wrong web page horizontal scroll messing up layout错误的网页水平滚动弄乱了布局
【发布时间】：2023-11-20 03:19:01
【问题描述】：

对于以下站点：http://mountainfoodstorage.com，当窗口最大化（大于约 1520 像素）时，页面正确显示。但是如果窗口比大约 1520 像素更薄，会出现一个水平滚动条，如果我向右滚动，我的布局就会出现混乱（应该跨越整个宽度的 div 被切断）。我的网页内容只有大约 1000 像素宽，所以水平滚动条太早了大约 500 像素。我检查了页面的元素，看看是否有任何东西将宽度增加到 1520 像素左右，但我找不到任何这样做的东西。有什么想法吗？

【问题讨论】：

问题似乎出在“main-menu-container”div 内部。当我告诉那个 div 去display:none 时，水平滚动条就消失了。

标签： css layout scroll width horizontal-scrolling

【解决方案1】：

它是 #main-menu，宽度 + 左侧 = 1250，而不是您的网站宽度。删除left 样式并将float:right 添加到ul

#main-menu {
    position:relative;
    left:265px; /* remove this */
    width:985px;
    margin:0 auto 0 auto;
}

#main-menu ul {
    margin-left:0;
    float: right; /* add this */
}

【讨论】：

谢谢，解决了大部分问题。我仍然得到大约 75px 的不需要的滚动空间。这可能是另一个元素的类似问题。我看看能不能找到。
完全修复。我的另一个问题是我水平堆叠的容器 div 的宽度不同。

【解决方案2】：

添加html, body {overflow-x: hidden;}?

【讨论】：

是的，他可以将其作为快速修复，或者实际找出哪个框溢出而不是缩放。当我看到以像素为单位的最小高度时，我确实放弃了寻找。我建议 OP 看看响应式网站设计和盒子模型来解决问题。