CSS 如果没有一个元素比 960px 容器宽，为什么会出现水平滚动条？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6751855/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why is a horizontal scroll bar appearing if none of the elements are wider than the 960px container?
提问by Spencer Cooley
Everything is wrapped in a div with an id="main_wrap"
一切都包裹在一个 div 中 id="main_wrap"
the main wrap has this style:
主要包装有这种风格：
#main_wrap{
margin:0 auto;
width:960px;
position:relative;
}
Since everything is wrapped inside of this div, I don't understand why a horizontal scroll bar would appear at the bottom.
由于所有内容都包含在此 div 内，我不明白为什么底部会出现水平滚动条。
采纳答案by caarlos0
Try add overflow hidden:
尝试添加溢出隐藏：
#main_wrap{
margin:0 auto;
width:960px;
position:relative;
overflow: hidden;
}
That should work (but is hacky).
这应该有效（但很hacky）。
回答by BCDeWitt
If any of the children have borders, padding (or sometimes margins) applied to them, that adds to the width and height. Using overflow: hidden;would avoid the scroll bars. But, if something has too much width, you probably want to find where it is coming from to avoid possible problems in the future.
如果任何孩子有边框，填充（或有时是边距）应用于它们，这会增加宽度和高度。使用overflow: hidden;将避免滚动条。但是，如果某些东西的宽度太大，您可能希望找到它的来源以避免将来可能出现的问题。
Note that you may be able to use box-sizing: border-boxto prevent borders and padding from adding additional width (or height). This is particularly useful when you are using something like width: 100%, but width: 100%also isn't necessary in most cases - elements with display: blockapplied will fill the width by default AND keep padding and borders from adding additional width.
请注意，您可以使用box-sizing: border-box来防止边框和填充增加额外的宽度（或高度）。这在您使用诸如 之类的东西时特别有用width: 100%，但width: 100%在大多数情况下也不是必需的 -display: block默认情况下，应用的元素将填充宽度，并防止填充和边框增加额外的宽度。
For example:
例如：
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>回答by pat8719
If the elements are side by side and have a combined width or , as BDawg says margins or paddings, that cause it to exceed 960px a scroll bar could appear. Post your entire code and we can figure it out very quickly. Hiding the overflow should work but it would not really explain why the scroll bar is appearing. Giving us your entire markup will help find the root of the problem.
如果元素并排并具有组合宽度或，正如 BDawg 所说的边距或填充，会导致它超过 960 像素，可能会出现滚动条。发布您的整个代码，我们可以很快弄清楚。隐藏溢出应该有效，但它并不能真正解释滚动条出现的原因。向我们提供您的整个标记将有助于找到问题的根源。
回答by babiro
Somewhere you've left any DOM elements unseen which occupies the extra width. it's better to find and fix the children than to use overflow:hidden. overflow:hidden will hide the scroll bar if user zooms in the page.
在某个地方，您没有看到任何占据额外宽度的 DOM 元素。找到并修复孩子比使用 overflow:hidden. 如果用户放大页面，overflow:hidden 将隐藏滚动条。
回答by Vortman
If you change width to 100% it helped you, but if you don't want,
just try add external <div style="width:100%"></div>
like this:
如果您将宽度更改为 100%，它会帮助您，但如果您不想要，
只需尝试添加外部，<div style="width:100%"></div>
如下所示：
<div style="width:100%">
<div class="main_wrap">
%your content%
</div>
</div>
