css中如何控制页面横向用滚动条控制,而纵向用鼠标滚轮控制

html-css016

css中如何控制页面横向用滚动条控制,而纵向用鼠标滚轮控制,第1张

纵向使用鼠标滚轮控制:可以设置页面的长度大于显示屏分辨率(可以设置body的height参数为3000px),多余的部分就以鼠标滚轮查看。

横向滚动条控制:在内容div或者article中设置横向长度大于屏幕分辨率,或者在父盒子设置overflow:scroll,多出的部分就使用滚动条显示。

从网页的美观性和用户体验角度,最好设置页面单向(纵向滚动)。横向滚动用户体验效果不是很好。

是你页面内容的宽度超过了浏览器显示的宽度

最快的解决方法就是在body加style="overflow-x:hiddenoverflow-y:auto"

这样也只是治标不治本的方法,还是得具体查看哪里的宽度设定出错,毕竟还得在不改变页面布局和显示内容不出错的情况下使用裁剪比较好

电脑上也没装编辑软件,不能做测试,只能靠猜了,你在body上用style加overflow:auto试试看,是在html上加哦,不是css样式里,因为不排除样式表里有样式把body设置了overflow:hidden

还有可能是#container这个样式里加了position:fixed的原因,你改成position:absolute看看有没解决。

另外呢,看你用绝对定位(margin:-150px 0 0 -200px)是为了让标签垂直水平居中,其实你现在用的这个方法有点过时了,你可以换成position:absoluteleft:50%top:50%transform:translate(-50%,-50%)这个方法的好处就是不用管div高度宽度是多少就自动水平垂直居中

只能看出这么多问题了,希望能帮到你

最后,你点F12打开浏览器的代码查看器,慢慢查找对应的样式,或者一个一个的把一些怀疑的样式取消来测试显示效果,也可以找出问题所在