css - 是什么导致出现水平滚动？

Question

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

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

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

Answer 1

只需定义您的#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

Answer 2

这是因为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"> 

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

Answer 3

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

body { 
    overflow-x:hidden;
}

Answer 4

问题出在你.title_wrapper或更确切的范围内.navline。你应该添加

.navline {
   overflow: hidden;
}