Html 隐藏水平滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15782458/
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
Hide horizontal scrollbar
提问by Gyonder
I have a problem with the horizontal scrollbar. I don't want it to show up. Actually it only shows up in Chrome and it doesn't in Internet Explorer. What can I do? I have tried modifying width and padding in the css class, but this changes the layout as well. The content inside test is dynamic so it can overflow vertically, and this is fine because I only don't want horizontal scrollbar.
我的水平滚动条有问题。我不希望它出现。实际上，它只显示在 Chrome 中，而不显示在 Internet Explorer 中。我能做什么？我曾尝试在 css 类中修改宽度和填充，但这也会改变布局。测试中的内容是动态的，所以它可以垂直溢出，这很好，因为我只是不想要水平滚动条。
HTML:
HTML：
<div class="test">
<table>
<tr>
<td>test</td>
</tr>
</table>
</div>
CSS:
CSS：
.test {
BORDER-TOP: #7F9DB9 1px solid;
BORDER-RIGHT: #7F9DB9 1px solid;
BORDER-LEFT: #7F9DB9 1px solid;
BORDER-BOTTOM: #7F9DB9 1px solid;
WIDTH: 100%;
PADDING-RIGHT: 0px;
PADDING-LEFT: 10px;
PADDING-BOTTOM: 10px;
PADDING-TOP: 10px;
HEIGHT: 100%;
BACKGROUND-COLOR: #ffffff
}
here is a fiddle if you need it: http://jsfiddle.net/XLY9L/
如果您需要，这里有一个小提琴：http: //jsfiddle.net/XLY9L/
Thanks
谢谢
回答by Micha? Wrotkowski
You can try with simples way
你可以用简单的方法试试
BODY {
overflow-x:hidden;
}
回答by micadelli
There's a simple solution for this, just add this to your CSS declaration:
对此有一个简单的解决方案，只需将其添加到您的 CSS 声明中即可：
box-sizing: border-box;
The reason for horizontal scrollbar appears is that padding and border is by default added to whatever width you give to your element. By setting it explicitly to border-box, the padding and border are included in that width value.
出现水平滚动条的原因是填充和边框默认添加到您为元素提供的任何宽度。通过将其显式设置为border-box，填充和边框包含在该宽度值中。
This property is supported in IE8+, FireFox 19+ (by using -moz-box-sizing) and iOS Safari and Android (by using -webkit-box-sizing)
此属性在 IE8+、FireFox 19+（使用-moz-box-sizing）以及 iOS Safari 和 Android（使用-webkit-box-sizing）中受支持
Also, I strongly suggest using shorthand css, as follows:
另外，我强烈建议使用速记 css，如下所示：
.test {
BOX-SIZING: border-box;
WIDTH: 100%;
HEIGHT: 100%;
PADDING: 10px 0 10px 10px;
BORDER: #7F9DB9 1px solid;
BACKGROUND-COLOR: #ffffff;
}
回答by vasanth
Add this code to your CSS. It will disable your horizontal scroll bar.
将此代码添加到您的 CSS。它将禁用您的水平滚动条。
html, body {
max-width: 100%;
overflow-x: hidden;
}
回答by Amy
Alternatively to @micadelli's answer, you could remove the width: 100%because <div class="test">is a block-levelelement and will automatically fill the horizontal space that it's occupying in the current container.
作为@micadelli 答案的替代方案，您可以删除width: 100%因为<div class="test">是块级元素，并将自动填充它在当前容器中占据的水平空间。
回答by Ihsan Khattak
you can also try this simple css code in you website. just write overflow-x:hidden; on body tag. it will be hide from your body.
你也可以在你的网站上尝试这个简单的 css 代码。只需写溢出-x：隐藏；在身体标签上。它会隐藏在你的身体之外。
