bounty将在5天内到期。此问题的答案有资格获得+50声望奖励。Angel Umeh希望引起更多注意这个问题：
我只想对这个问题有一个清楚的解释，这是一个困扰我多年的问题。没有一个建议的解决方案像overflow-x：hidden;或删除违规元素或设置box-sizing：border-box;工作，因为我有（目前）经历了这一点在一个完全空的页面上没有什么，当我使用Chrome DevTools和设置视图到任何移动终端的尺寸。
此外，我不喜欢这个问题得到负面评价的事实，当它是这样一个巨大的问题。
我得到了我的HTML网站布局突然水平滚动，我不知道如何或为什么。有什么建议吗？
3条答案
按热度按时间nzrxty8p1#
当元素的宽度大于视口宽度时会发生这种情况。这可能是由于文本溢出容器或其他大小不正确的元素造成的。
Good Fix
使用检查器并开始逐个删除元素，最终您将删除一个元素，该元素将删除水平滚动条。请注意，您可以CTRL-Z取消删除检查器中的元素。一旦你发现了有问题的元素，你可以检查/调整它的样式来修复溢出。
作弊修复
将
overflow-x: hidden;样式添加到body元素。这是不可取的，因为它没有修复溢出的元素，而是隐藏了溢出的部分。
hxzsmxv22#
有时一些元素的固定宽度超过屏幕大小，找到该元素并在媒体查询中更改它，或者尝试给予
max width: 100%gab6jxml3#
我明白你说隐藏溢出不起作用。但是，你有没有尝试过在CSS中定位移动的特定的屏幕宽度，然后将
overflow-x: hidden;应用到body标签中。您可以使用CSS
@media规则来实现这一点。您可以在此here上查看更多你也有这个吗;
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">在你的
<head>标签里这是一种广泛流行的做法，可以解决许多响应式网页问题。如果您能向我们提供一些您遇到问题的代码，用户可能会对您的问题有更多的了解。