Css 水平滚动出现在手机上

首先感谢所有回应的人。我相信这对于CSS向导来说是一个不需要动脑筋的问题，但对我来说，这绝对不是我有过的经验，因此我提出了这个问题

在我的网站上，我突然在手机上出现了一个水平滚动条（以前没有，也没有为此编辑CSS）

除了在手机上进行检查外，我还通过模拟器@进行检查（似乎平板电脑上也有）。有人知道如何解决这个问题吗

不确定是否是一些WP插件或主题与更新版本的WP工作异常，但基本上这里是CSS文件的内容（它相当大）

（应易于搜索和阅读）。我想把它放在这里，但是没有足够的空间

谢谢

更新： 在查看并测试CSS后，当您进行以下更改时，网站的行为似乎符合您的要求：

@media screen and (min-width: 320px) { /* do the same thing for (min-width: 480px) */
    .typology-section {
        /* this makes all the text fit in the view */
        width: 80%; 

        /* the ad is wide, so this cuts it off at a certain point so no need to scroll */
        overflow-x: hidden; 
    }
}

我是通过使用Firefox的开发工具来选择一个元素（当您在Inspect element面板中时，使用ctrl+shift+c）来发现这一点的，即一个退出视图的元素，单击它，然后编辑该面板中的CSS以找出问题的原因

原始答案

我试过了，看起来页面顶部的广告占据了大量的水平空间，并强制设置了水平滚动条。你能试着用CSS操纵广告吗？如果是这样，我会这样做：

@media screen and (min-width: 350px) { //350-400px is roughly the width of most phones
    .advertisement {
        max-width: 300px;
    }
}

这使得当屏幕具有一定宽度时，会对广告应用最大宽度

顺便说一下，如果您使用的是Chrome，您可以通过打开Inspect元素（ctrl+shift+i），然后切换设备工具栏（ctrl+shift+m）来查看移动视图。只是想把它放在那里，以减轻检查移动视图的工作量

更新： 在查看并测试CSS后，当您进行以下更改时，网站的行为似乎符合您的要求：

@media screen and (min-width: 320px) { /* do the same thing for (min-width: 480px) */
    .typology-section {
        /* this makes all the text fit in the view */
        width: 80%; 

        /* the ad is wide, so this cuts it off at a certain point so no need to scroll */
        overflow-x: hidden; 
    }
}

我是通过使用Firefox的开发工具来选择一个元素（当您在Inspect element面板中时，使用ctrl+shift+c）来发现这一点的，即一个退出视图的元素，单击它，然后编辑该面板中的CSS以找出问题的原因

原始答案

我试过了，看起来页面顶部的广告占据了大量的水平空间，并强制设置了水平滚动条。你能试着用CSS操纵广告吗？如果是这样，我会这样做：

@media screen and (min-width: 350px) { //350-400px is roughly the width of most phones
    .advertisement {
        max-width: 300px;
    }
}

这使得当屏幕具有一定宽度时，会对广告应用最大宽度

---

顺便说一下，如果您使用的是Chrome，您可以通过打开Inspect元素（ctrl+shift+i），然后切换设备工具栏（ctrl+shift+m）来查看移动视图。只是想把它放在那里，以减轻检查移动视图的工作量

虽然可能有其他问题导致该问题，例如超出主体的元素，但可以通过隐藏溢出的元素来解决该问题

body, html {
    overflow-x: hidden;
    max-width: 100%;
}

注意：如果页面中的元素溢出，它们将被切断。因此，您必须通过执行以下操作来确保它们不会溢出：

.innner-element {
max-width: 100%; /* Ensures that it doesn't extend beyond its parent */
}

---

虽然可能还有其他问题导致该问题，例如超出主体的元素，但可以通过隐藏溢出的元素来解决该问题

body, html {
    overflow-x: hidden;
    max-width: 100%;
}

注意：如果页面中的元素溢出，它们将被切断。因此，您必须通过执行以下操作来确保它们不会溢出：

.innner-element {
max-width: 100%; /* Ensures that it doesn't extend beyond its parent */
}

---

这（特别是Jonathan Azulay和user3302919的答案）可能是寻找潜在问题的好地方。我仍在查看您链接的CSS，但问题似乎与.topology广告有关（至少在本例中是这样）。这里有一个更新。。。对于你的两个网站，我发现问题在我更改后得到了解决。试试看！如果这些数字对你有帮助，请拨打Idk，但第一个网站请尝试CSS行#4635，第二个网站请尝试CSS行#4313。具体来说，在480px和320px的媒体查询下，为这两个网站创建或更改为

类型学部分{width:80%；overflow-x:hidden；}

（感谢Sleek Geek）。不过，它可能会切断你的广告。这（特别是Jonathan Azulay和user3302919的回答）可能是寻找潜在问题的好地方。我仍在查看您链接的CSS，但问题似乎与.topology广告有关（至少在本例中是这样）。这里有一个更新。。。对于你的两个网站，我发现问题在我更改后得到了解决。试试看！如果这些数字对你有帮助，请拨打Idk，但第一个网站请尝试CSS行#4635，第二个网站请尝试CSS行#4313。具体来说，在480px和320px的媒体查询下，为这两个网站创建或更改为

类型学部分{width:80%；overflow-x:hidden；}

（感谢Sleek Geek）。虽然，它可能会切断你的广告。一个肮脏的方法是做一些类似*{max width:100%}的事情，试图阻止所有元素与它们的父元素重叠。还有，如果你加上！重要的是，它变得更加强大。但是，当您出于设计目的需要重叠元素时，您必须是特定的。一种肮脏的方法是执行类似*{max width:100%}的操作，该操作试图阻止所有元素重叠其父元素。还有，如果你加上！重要的是，它变得更加强大。但是，当您出于设计目的需要重叠元素时，您必须明确。现在已经提供了一些答案，可以将导致问题的相关代码部分发布到问题中。照目前的情况，这个问题对将来的人来说不是很有用。既然已经提供了一些答案，也许可以将导致这个问题的代码的相关部分发布到问题中。照目前的情况，这个问题对某些人来说不是很有用