CSS 中出现水平滚动条的原因是什么?
我正在开发的网站上有一个讨厌的水平滚动条,我似乎找不到它的原因。我已经完成了作业并寻找解决方案,但我能找到的唯一方法是将“overflow-x”属性设置为“隐藏”的常用方法。这对我来说是不可接受的,因为这只会隐藏问题,而不是解决问题。不知何故,尽管我尝试使用 CSS 将最大宽度设置为 100%(我什至尝试在全局应用它),但某些东西正在将我网站的宽度推过查看窗口。这是我的网站的链接,以便您可以获得更好的图片: 站点链接
请注意站点的大部分内容如何正常显示,就好像不应该有水平滚动条一样。然而,图片和“列”DIV 一样,居中使用总宽度。
我几乎已经到了需要放弃一切并重新开始的地步。任何帮助将不胜感激。
I have a pesky horizontal scrollbar on the website that I'm developing, and I can't seem to find the cause of it. I've done my homework and searched for a solution, but the only one I was able to find was the common method of setting the "overflow-x" property to "hidden." This is unacceptable for me as this only hides the problem, not fixes it. Somehow, something is pushing the width of my site past the viewing window, even though I have attempted to set the maximum-width to 100% using CSS (I even tried applying it globally). Here is a link to my site so that you can get a better picture:
Site Link
Notice how most of the site displays normally as if there should not be a horizontal scrollbar. However, the pictures and "column" DIV's, center using the total width.
I'm almost to the point where I need to scrap everything and start over. Any help would be greatly appreciated.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
首先想到的是您的 .row 类的左侧位置为 100%,最大宽度为 100%。这绝对是问题的一部分。
经过进一步调查,您错误地使用了 left 和 right 位置属性。甚至您的图像缩略图也是整个问题的一部分。
你是对的,设置overflow-x:hidden并不能解决你的问题。
在检查样式表并删除设置 left: 100% 或 right: 100% 的所有左侧和右侧属性后,它解决了问题。 (在firefox的firebug中调试)
First thing that comes to mind is that your .row class has a left position of 100% and a max-width of 100%. That is definitely part of the problem.
After further investigation, you are using left and right position properties incorrectly. Even your image thumbnails are part of the overall problem.
You're right that setting overflow-x: hidden will not fix your problem.
After going through your stylesheet and removing all left and right properties where you're setting left: 100% or right: 100%, it fixes the problem. (debugged in firebug for firefox)