Question

所以我搞乱了我的网站CSS，所有突然总是有一个水平滚动条，我的导航栏不会一直到最后，即使它的宽度设置为100％。这是个常见的问题吗？我查看了我的CSS值，但没有一个足以使页面需要扩展。

编辑：代码

html {
 height:100%; 
}

.content {
    width:269px;
    margin-left: auto;
    margin-right: auto;
    }
.home {
    width:100%;
    margin-left: auto;
    margin-right: auto;
    text-align:center;
    font: bold x-large verdana, arial, helvetica, sans-serif;
    padding-top:10px;
    }
.home a:visited {
    color: blue;
    }

.head {
    width:100%;
    text-align:center;
    padding: 15px; 
    font: bold x-large verdana, arial, helvetica, sans-serif;
    }

.foot {
    width:100%;
    text-align:center;
    padding: 20px; 
    font: normal medium verdana, arial, helvetica, sans-serif;
    }
body { 
    background-color: #FFF; 
    margin: 0px; 
    padding: 0px; 
    font: normal medium verdana, arial, helvetica, sans-serif;
}


div#navbar2 {
    height: 50px;
    width: 100%;
    border-top: solid #000 1px;
    border-bottom: solid #000 1px;
    background-color: #336699;
    text-align:center;
}
div#navbar2 ul {
    margin: 10px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: x-large;
    color: #000;
    line-height: 30px;
    white-space: nowrap;
}
div#navbar2 li {
    list-style-type: none;
    display: inline;
}
div#navbar2 li a {
    text-decoration: none;
    padding: 11px 20px;
    color: #FFF;
}
div#navbar2 li a:link {
    color: #FFF:
}
div#navbar2 li a:visited {
    color: #FFF;
}
div#navbar2 li a:hover {
    color: #FFF;
    background-color: #3366FF;
}

Answer 1

您的页脚宽度为：100％;但也有左右填充

你总是需要数学填充和宽度。

编辑：与你的.head相同

Answer 2

隐藏溢出使用的东西：overflow：hidden;

Answer 3

只需将此css属性添加到您的body元素样式。

overflow-x:hidden

它将删除水平滚动条并确保右侧有额外的空白区域。

我加载网页时出现CSS / HTML水平滚动条

3 个答案: