我在 Angular 上的网站右侧的空白区域

Question

Here 是我网站的链接。它可以正常工作，并且先验地在我的手机上也可以接缝，但是，它不应该左右滚动，只能上下滚动！ 使用手机时，我的网站右侧有一个奇怪的白色部分。当我打开开发者模式并进入平板模式并查看元素时。我看到正文只是“好的部分”，白色部分没有在 HTML 中定义，所以我找不到问题的根源。

我的代码在https://github.com/NEGU93/agustinbarrachina 中可用。 我试过了：

html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}

正如here 和here 所说。我不认为这个问题与页脚有关，因为它说here

这也很奇怪，因为我在主站点 (home) 中没有这个问题，所以我认为问题出在timeline HTML 或 CSS 中。

Answer 1

两个问题： 首先是将<i> 元素定义为600px，而不是100%： https://github.com/NEGU93/agustinbarrachina/blob/master/src/app/timeline/timeline.component.css#L274

另一个只是在这里添加overflow-x: hidden： https://github.com/NEGU93/agustinbarrachina/blob/master/src/app/timeline/timeline.component.css#L32

找到这些溢出元素的一个好方法是使用 chrome 开发者工具来缩小页面宽度直到水平滚动显示。

然后开始从 dom 中删除元素，方法是单击它们并按下 DELETE 键。当您看到水平滚动消失的那一刻，您CTRL+Z 并向下钻取到它的子元素，您在其中执行相同的过程，直到找到讨厌的元素。然后检查它的 CSS props 以找出它为什么这样做。