Question

我只是想删除水平条。我正在以1280x800的分辨率浏览网站，所以不管怎样都不应该有水平条。

它发生在chrome，firefox和safari中。

我的代码是，

 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;
}

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

3 个答案: