导航栏超出了页面的宽度

Question

我正在开发一个前同事开始的网站，我注意到每次浏览器窗口的分辨率达到768px或更低时导航都会转到下拉菜单，这似乎是比页面本身更宽。 底部有一个水平滚动条，允许用户向右滚动，页面旁边有一堆空白区域。

（这是我遇到的问题的图片）

因为我没有从头开始构建这个页面，所以我不完全确定我可以删除哪些代码，而且我不完全确定问题出在哪里。 我也不确定要在这里发布的代码部分。

我确实在网站上搜索了与我类似的问题，有些帖子谈到了改变“溢出”设置，但不幸的是，这并没有为我解决问题。 如果与我的帖子完全相同，我会道歉。

我上传的网站是： http://ariellafreinders.co.uk/LGA/copy.html （所以，如果有人想看看他们可以在那里做的代码。）

最初我认为假设错误位于媒体查询的某个地方是有意义的，因为这个问题只存在于较小的分辨率中，但我还有第二个想法。

我希望我的帖子有道理，谢谢你的时间。

Answer 1

通常当我的客户遇到此问题时，因为他们的内容（主要是文本）超出了视口。一个例子是，标题中的长字，使最后几个字母超过容器（因为断字不是标准的）。

请向下滚动页面，查看是否出现过这种情况。

我经常使用的快速修复方法是CSS：

* {
    max-width: 100%;
}

这解决了大多数此类错误。您可以选择特定元素而不是通配符。

我尝试将该css应用到您的网页并修复了它。然而，社区通常不会理解修复，所以我会给你一个解释：

这样做的原因是你有超出的元素，如上所述。为什么？

标题栏上的填充增加了额外的宽度，你应该应用

box-sizing: border-box

它的造型。你有一些要素：

.col_tiles_1, 
.col_tiles_2,
.col_tiles_3,
.col_tiles_4, 
.col_tiles_5,
.col_tiles_6,
.col_tiles_7,
.col_tiles_8,
.col_tiles_9,
.col_tiles_10,
.col_tiles_11,
.col_tiles_12,
.col_tiles_13,
.col_tiles_14 {
    ...
    margin-left: 12.5px;
    margin-right: 12.5px;
    ...
}

这使得框在右边附加一个边距，从而形成空格。

最快的修复方法是max-width属性，但它可能并不适合所有人。

我希望这会有所帮助，否则让我知道，我会负债。

Answer 2

问题是#attraction_items元素比其父元素宽，导致页面水平滚动。

试试这个：

#attraction_items {
  clear: both;
  overflow: hidden;
  /* margin-left: -12.5px; */
  /* margin-right: -12.5px; */
}

如果您注释掉这两个负边距，则页面不会水平滚动。

看起来你的前同事试图通过课程col_tiles_1来补偿子元素的边距

.col_tiles_1, .col_tiles_2, .col_tiles_3, .col_tiles_4, .col_tiles_5, .col_tiles_6, .col_tiles_7, .col_tiles_8, .col_tiles_9, .col_tiles_10, .col_tiles_11, .col_tiles_12, .col_tiles_13, .col_tiles_14 {
  background-color: #f5f5f5;
  background-size: cover;
  background-position: center;
  position: relative;
  height: 344px;
  min-height: 1px;
  margin-left: 12.5px;
  margin-right: 12.5px;
}

Answer 3

你只需要注释吸引物品的负边距。在main.css中，更改：

#attraction_items{
    clear: both;
    overflow: hidden;
    margin-left: -12.5px;
    margin-right: -12.5px;
}

到

#attraction_items{
    clear: both;
    overflow: hidden;
    /*margin-left: -12.5px;
    margin-right: -12.5px;*/
}