是什么导致出现水平滚动？答案

【问题标题】：What is causing the horizontal scroll to appear?是什么导致出现水平滚动？
【发布时间】：2013-03-05 17:07:56
【问题描述】：

在普通版本、宽版本和平板电脑版本中，一旦窗口距离site_wrap 容器大约一英寸，就会出现水平滚动。我可以看到，如果我从 div#title 中删除 25px 的宽度，滚动就会消失。

但我无法理解的是，容器 (site_wrap) 是 1280 像素，div.title_wrapper 是自动的，div#title 是 1234 像素，左边距为 46 像素。

http://brainbuzzmedia.com/themes/expression/blog/

【问题讨论】：

你的解释有点混乱。你能尝试更简洁吗？

标签： css debugging firebug margin

【解决方案1】：

这是因为Blog菜单，它被隐藏（不透明度为0）但显示不是none，这意味着它仍然占据它的位置。

您可以通过将 display:none 设置为 ul 元素来检查这一点。

<li id="menu-item-813" class="menu-item menu-item-type-post_type menu-item-object-page     current-menu-item page_item page-item-178 current_page_item menu-item-813"><a href="http://brainbuzzmedia.com/themes/expression/blog/">Blog</a>
<!-- this--><ul class="sub-menu">

您应该正确设置它的位置，以免文档溢出。

【讨论】：

【解决方案2】：

只需定义您的#site_wrap

margin:0 auto 和overflow: hidden 像这样

div#site_wrap {
margin: 0 auto;
overflow: hidden;
}

css路径是这样的

http://brainbuzzmedia.com/themes/expression/wp-content/themes/expression/css/bgs/gradient.css

【讨论】：

啊，看起来就是这样。仍然不知道为什么会发生这种情况，因为没有什么比那个容器更宽了，但是谢谢。
@BRAINBUZZmedia 请检查我的答案。

【解决方案3】：

在不同的@media 查询中似乎有一些错误计算导致了这个问题。通过添加以下内容，您可以轻松摆脱整个水平滚动条（因为无论如何都不需要它）：

body { 
    overflow-x:hidden;
}

【讨论】：

好像不是这样的。我刚刚删除了包含媒体查询的 responsive.css 文件，它仍然显示滚动条。我想弄清楚为什么会发生这种情况，而不是在上面扔创可贴。

【解决方案4】：

问题出在您的.title_wrapper 或更确切地说是.navline。你应该添加

.navline {
   overflow: hidden;
}

【讨论】：