导航栏超出页面宽度

Question

我目前正在一个前同事创建的网站上工作，我注意到每次浏览器 window 的分辨率达到 768px 或更低时，导航都会变成下拉菜单，它似乎比页面本身更宽。底部有一个水平滚动条，允许用户向右滚动，页面旁边有一堆白色 space。

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

因为我没有从头开始构建此页面，所以我不完全确定可以删除哪些代码，也不完全确定问题出在哪里。我也不确定 post 代码的哪一部分。

我确实在网站上搜索了与我类似的问题，一些 post 谈到更改 "overflow" 设置，但不幸的是，这并没有解决我的问题。如果有与我完全相同的post，我深表歉意。

我已将网站上传到： http://ariellafreinders.co.uk/LGA/copy.html （因此，如果有人想查看代码，可以在那里查看。）

最初我认为假设错误出在媒体查询的某个地方是有意义的，因为这个问题只存在于较小的分辨率中，但我改变了主意。

我希望我的 post 是有道理的，感谢您的宝贵时间。

Answer 1

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

请向下滚动页面并查找是否出现此问题。

我经常使用的快速修复在 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 属性，但它可能并不适合所有人。

希望这对您有所帮助，否则请告诉我，我会去 in-debt。

Answer 2

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

试试这个：

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

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

看起来您的前同事正试图使用 class 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;*/
}

导航栏超出页面宽度

Navigation bar exceeds the width of the page

jquery

html

css

navbar

nav