内联验证向左滚动

Question

我正在使用jquery内联验证插件： http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/

这里：

http://bybyweb.com/mealbook/user/add

如果您测试此页面（通过单击底部的上传），在较低的屏幕分辨率（小于1680x1050），您会注意到左侧有奇怪的滚动（滚动顶部是默认的，正常行为）...我以前使用过这个插件，我从来没有遇到类似的问题...

我的html / css结构可能有问题。如果您知道它可能是什么 - 请帮忙。谢谢！

Answer 1

如果您带走body{overflow-x: hidden;}，您可以看到较小的窗口大小，页面右侧有额外的空间。这个额外的空间是由于设置的宽度大于#header中的容器。

1. 在#header中，您将#logo_main_menu的宽度设置为940px。这意味着所有子元素需要加起来为940px。
2. 在该div中，您在272px上设置了#logo的宽度，在705px上设置了#search的宽度。他们总计977px而不是940px！
3. 为了让#search内的事情变得更糟，你将#menu的宽度设置为940px，这意味着你现在正试图让940 + 272 = 1212px适合你的空间已设为940px。
4. 我确信#search中还有其他元素也有固定的宽度。

总结一下，你需要确保如果使用固定的像素宽度，它们都会加起来容纳父容器的宽度，在本例中为940px

P.S。我测试了删除那些宽度，滚动似乎工作得很好。没有侧身动作。在更小的宽度上，它开始看起来有点奇怪。要进行全面测试，您需要确保关闭body{overflow-x: hidden;}并确保所有宽度都与其容器相加。