html - 需要修复站点的宽度以删除水平滚动条

Question

我只是想删除单杠。我正在以 1280x800 分辨率浏览网站，所以无论如何都不应该有水平条。

它发生在 chrome、firefox 和 safari 中。

您可以访问该网站：http: //ilmioforno.com

我的代码是，

 body {
background: #f1eee3;
color: #111;
margin: 0;
   }
 #page {
   border: solid black 4px;
   clear: both;
}

 #wrap { 
   clear: both; 

    }

 #content {
    margin: 0 auto;
    padding: 20px;
    border-radius: 10px;
    moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    background: #b63b3b;
    border: 3px solid #942a2a;
    color: #51301f;
    font-size: 13px;
    width: 65%;


}

Answer 1

好吧，您可以使用 CSS 属性 overflow-x 例如：

#content
{
overflow-x:hidden;
}

它将删除水平滚动条...

你可以在这个网站上试试 http://www.w3schools.com/cssref/css3_pr_overflow-x.asp

Answer 2

问题是div#nav它有一个span-24将宽度设置为 950px，而你也有 360px 的左边距。这有效地产生了 1310px 的总宽度，因为您没有隐藏任何包含元素的溢出。您需要调整导航的宽度。我假设你的整体听众/页面是 950，所以这意味着你的导航应该950 - 360 = 590最多。

Answer 3

maring-left从中删除#nav：

#nav {
   color: #51301F;
   /*maring-left: 360px;*/
   margin-top: -120px;
   font-weight: bold;
   font-size: 22px;
   text-transform: uppercase;
   background: none;
}

并将其添加到.menu：

.menu{
   maring-left: 360px;
}