导致水平滚动的 CSS 布局问题答案

【问题标题】：CSS Layout Issue Causing Horizontal Scroll [closed]导致水平滚动的 CSS 布局问题
【发布时间】：2021-11-04 18:41:14
【问题描述】：

所以，我导入了一个演示主题（wordpress）。该主题带有一些问题，包括开发人员拒绝修复的水平滚动。我想要一些帮助来解释如何删除水平滚动或导致它的原因，所以我找到了一种用 CSS 修复它的方法。

【问题讨论】：

有关 Stack Overflow 的问题（实际上是所有 Stack Exchange 网络）必须是独立的。 Stack Overflow 的主要目的是让问题对未来的访问者有用。要求用户离开现场以获取更多信息的问题对未来的访问者没有用处，尤其是在场外资源发生变化时。这个问题可能很好/有用，但是您需要将足够的代码移入问题中，以便我们知道您在问什么，而无需离开现场即可找到。详情请见this question。
根本没有横向滚动。不知道你说的是哪一部分。
corporateh27.sg-host.com/portfolio/charlotte-blagawah - 例如这个页面。

【解决方案1】：

如果您遇到水平滚动问题，最好的办法是在每个元素上添加outline：

* {outline: 1px solid blue;}

这会有效地为页面上的每个元素添加边框（最好使用outline 属性而不是border，因为轮廓不会像@ 那样将任何像素值添加到元素的大小987654327@ 有）。

然后您将能够查看导致问题的元素并进行修复。

当您发现有问题的元素时，很多人倾向于在父元素上添加overflow: hidden;。一般来说，我会建议找到导致问题的特定问题/子元素。在您的情况下，它是由添加到整个引导类列表中的填充值引起的。我已在图像中取消选择它们。（见图）：

而不是挑选所有这些值，在您的情况下，可能值得只添加 .content {overflow:hidden} 这将删除主 .content 类的溢出。该主题中使用的一些代码很糟糕。

【讨论】：

感谢保罗的建议。我希望有一条 css 行来为我解决问题，而不是进行重大更改。
因为我不知道该网站是如何使用 elementor 制作的，以及后端使用了哪些潜在的隐藏元素（elementor 有时会这样做）我只能建议.content {overflow:hidden} 这有点hacky，但它会解决它。
我已对答案进行了编辑，但现在已关闭。给出的代码 sn-p 将解决问题，您仍然可以接受答案并投票/标记为正确。
干得好，保罗。我添加了 - .content {overflow:hidden} 修复了它！