jquery - 导航栏超出页面宽度

标签 jquery html css navbar nav

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

(这是我遇到的问题的图片)

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

我确实在网站上搜索了与我类似的问题,并且一些帖子谈到了更改“溢出”设置,但不幸的是,这并没有解决我的问题。 如果有与我完全相同的帖子,我深表歉意。

我已将网站上传到: http://ariellafreinders.co.uk/LGA/copy.html (所以如果有人想看看他们可以在那里做的代码。)

最初我认为假设错误存在于媒体查询中的某个地方是有意义的,因为这个问题只存在于较小的分辨率中,但我正在重新考虑。

希望我的帖子有意义,感谢您的宝贵时间。

最佳答案

通常当我的客户遇到这个问题时,这是因为他们的内容(主要是文本)超出了视口(viewport)。一个例子是,标题中的一个长单词,使最后几个字母超出容器(因为分词不是标准的)。

请向下滚动页面并查找是否出现这种情况。

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

我希望这会有所帮助,否则请告诉我,我会负债累累。

关于jquery - 导航栏超出页面宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31632250/

相关文章:

css - 几个具有相同ID的HTML元素,是不是很错?

html - 调整页面大小时需要页脚保持在内容下方

jquery - JQuery Mobile App标题中的样式按钮

javascript - 通过单击按钮更改div中的内容

html - 如何制作全屏图像网格?

css - 高度 : 100vh (working) vs min-height: 100vh (not working) for body? 背后的技术原因

javascript - 应用过滤器后jQuery调整窗口大小

javascript - 为可能未启用JavaScript的用户编写代码值得吗?

html - 如何缩小圆圈中两行文字之间的间距

javascript - 设置 doctype 会破坏我的 css 和 javascript