为什么在我的网站上显示水平滚动条？
糖浆
我正在制作一个网站，并显示一个水平滚动条。当然，我可以使用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>元素相对定位，并使用右移right: -450px。
随着position: relative该元素的原始空间被保留。因此，当您将元素向右移动450px时，其在布局中的原始空间将保持不变，并且文档将水平延长。这就是滚动条的原因。
删除或调整right: -450px规则以查看差异。
同样，仅出于对比目的，relative通过absolute定位开关即可将元素从文档流中删除，从而消除了原始空间。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
网站缺少水平滚动条
- 2
为什么当鼠标悬停在ScrollViewer上时，为什么我的WPF样式触发器无法仅显示水平滚动条？
- 3
水平滚动条未显示
- 4
水平滚动条未显示
- 5
如何删除WordPress网站上的水平滚动条？
- 6
ListView不显示水平滚动条
- 7
为什么我的滚动条未总是正确绘制？
- 8
当没有滚动条时，为什么我的网站在移动设备上的显示方式有所不同
- 9
DatagridView不显示水平滚动条
- 10
为什么我看不到滚动条的底部
- 11
CSS：为什么我的滚动条高度为100％？
- 12
为什么我的滚动条看起来很古怪？
- 13
为什么会出现y：隐藏在我的flex布局中创建水平滚动条？
- 14
为什么我不应该在网站上显示滚动条？
- 15
为什么我的tkinter水平滚动条在右下角被挤压，但垂直滚动条看起来正常？
- 16
为什么我的Tkinter滚动条不起作用？
- 17
为什么我的UIScrollView水平滚动条不显示？
- 18
为什么我的页面在小屏幕上显示水平滚动条？
- 19
为什么我的滚动条看起来很古怪？
- 20
是什么导致我的水平滚动条
- 21
为什么滚动条不显示在DIV中
- 22
ListView不显示水平滚动条
- 23
当没有滚动条时，为什么我的网站在移动设备上的显示方式有所不同
- 24
DatagridView不显示水平滚动条
- 25
我的网站的滚动条怎么了？
- 26
为什么我的div滚动条不起作用？
- 27
为什么我的网站在移动端视图中有一个水平滚动条？
- 28
网站上的 iframe 滚动条和隐藏菜单
- 29
为什么我有一个带有 css 和 html 的水平滚动条
我来说两句