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

【问题标题】：CSS/HTML a horizontal scroll bar appears when I load the webpageCSS/HTML 加载网页时出现水平滚动条
【发布时间】：2016-05-30 17:36:03
【问题描述】：

所以我弄乱了我的网站 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;
}

【问题讨论】：

请推送您的代码以便更好地理解
有些东西已经超出了它的界限
好的，你想让我补充什么？
你能在jsfiddle.net 上创建一个包含 HTML 标记的演示吗？
jsfiddle.net/4RQMy/2 就是这样

标签： html css

【解决方案1】：

您的页脚有宽度：100%；但也有左右填充

您总是需要计算填充和宽度。

编辑：与您的 .head 相同

【讨论】：

好的。我将其更改为 padding-top 问题仍然存在。还是这种改变还不够好？编辑没关系 onjsfiddle 它可以工作，但在 chrome 中我认为这不是因为 cookie 或任何 chrome 有

【解决方案2】：

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

【讨论】：

我只是把它放在身体里吗？或者哪个
在 css 文件或样式标签中。由该 div 的其他妆容
使用 chrome 或 chromium 并检查溢出的 div
我正在使用 chrome 并在我们说话时进行检查
你可以将它应用到身体上，看看它的作用。但如果你有一个可滚动的网站（长），你就不能这样做

【解决方案3】：

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

overflow-x:hidden

它肯定会移除水平滚动条并防止右侧出现多余的空白。

【讨论】：