html – 为什么我的网站上显示水平滚动条？

概述我正在制作一个网站和一个水平滚动条显示.当然,我可以使用overflow-x来解决我的所有问题,但我想知道问题的根源.有人能告诉我滚动条出现的原因吗？这是我的css： body { background-image: url("rain.jpg"); background-repeat: no-repeat; background-size: 100% 800px;} 我正在制作一个网站和一个水平滚动条显示.当然,我可以使用overflow-x来解决我的所有问题,但我想知道问题的根源.有人能告诉我滚动条出现的原因吗？这是我的CSS：

body {    background-image: url("rain.jpg");    background-repeat: no-repeat;    background-size: 100% 800px;}#header {    wIDth: 83%;    height: 70px;    background-color: blue;    border: cyan solID 3px;    border-radius:20px;    position: relative;    top: 20px;    margin: auto;}p {    Font-size:30px;    Font-weight: bold;    color: yellow;      position: relative;    right: -450px;    top: -8px;}#container {    position: relative;    wIDth: 83%;    height: 1000px;    top: 50px;    margin: auto;    background-color: blue;}.img {    height: 150px;    wIDth: 225px;    padding: 0px;    padding-top: 30px;    cursor: pointer;    opacity: 1;}.click {    height: 400px;    wIDth: 600px;    position: relative;    right: -200px;    cursor: pointer;}li {    display: inline-block;}

解决方法 请注意,您有< p>元素相对定位并向右右移：-450px.

使用position：relative,保留元素的原始空间.因此,当您将元素向右移动450px时,布局中的原始空间保持不变,文档水平延长.这就是滚动条的原因.

删除或调整右：-450px规则以查看差异.

此外,仅仅为了对比,使用绝对定位切换相对,从文档流中移除元素,并消除原始空间.

Read more about CSS positioning at MDN.

总结

以上是内存溢出为你收集整理的html – 为什么我的网站上显示水平滚动条？全部内容，希望文章能够帮你解决html – 为什么我的网站上显示水平滚动条？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。