如果没有任何元素比960px容器更宽,为什么会出现水平滚动条？

Question

一切都被包裹在一个div中 id="main_wrap"

主要包装有这种风格:

#main_wrap{
  margin:0 auto;
  width:960px;
  position:relative;
}

由于所有内容都包含在div中,我不明白为什么水平滚动条会出现在底部.

Answer 1

如果任何一个孩子都有边框,应用了填充(或有时是边距),这会增加宽度和高度.就像caarlos0所说的那样,overflow: hidden;会避免滚动条.但是,如果某些东西的宽度过大,您可能希望找到它的来源,以避免将来出现问题.

请注意,您可以使用box-sizing: border-box以防止边框和填充添加额外的宽度(或高度).这在使用类似的东西时特别有用width: 100%,但width: 100%在大多数情况下也不是必需的 - display: block默认情况下,带有应用的元素会填充宽度并保持填充和边框不会增加额外的宽度.

例如:

html, body { margin: 0; padding: 0; }

div {
  background: #111;
  color: #eee;
  padding: 1em; /* This doesn't add to width - still at 100% width */
  border: 2px solid #5e5;  /* This also doesn't add to width - still at 100% width */
}

<div>Test</div>

Answer 2

尝试添加溢出隐藏:

#main_wrap{
    margin:0 auto;
    width:960px;
    position:relative;
    overflow: hidden;
}

这应该工作(但是很糟糕).