我一直在用Animate.CSS制作我自己的个人网站,并注意到右侧有一个空白点,无法找出原因
这是我的代码：
<!DOCTYPE HTML><HTML><head> <style> .hudson { color: white; position: relative; Font-size: 60px; left: 400px; top: 110px; Font-family: Futura,'Trebuchet MS',Arial,sans-serif; } .threeD { text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,.1),0 0 5px rgba(0,0 1px 3px rgba(0,.3),0 3px 5px rgba(0,.2),0 5px 10px rgba(0,.25),0 10px 10px rgba(0,0 20px 20px rgba(0,.15); } .p1 { position: relative; top: 75px; left: 100px; -webkit-animation-delay: 1s; } .p2 { position: relative; top: 85px; left: 100px; -webkit-animation-delay: 1s; } .p3{ position: relative; top: 95px; left: 95px; -webkit-animation-delay: 1s; } .Coding { position: relative; top: -325px; left: 535px; } .paracolor { color: skyblue; Font-size: 25px; Font-family: Tahoma,Geneva,sans-serif; } .img1 { position: relative; top: 250px; left: 20; } body { background-image: url(PICTURES1/mountains4.jpeg); background-size: 102%; background-repeat: no-repeat; } </style></head> <link rel=stylesheet href="CSS3/animate(1).CSS"><body> <h2 >Hudson Reamer</h2> <p >I am a young technology and Coding enthusiast. I am currently studying HTML,CSS,and C++.</p> <p >I hope to one day go to MIT or Stanford to study computor scIEnce of computor engineering.</p> <p >I will build people custom computors for an 100 dollar building fee and the price of the PC parts</p> <img src="PICTURES1/Coding.png" ></body> 感谢您的帮助和回复！
解决方法 页面右侧的大面积空白是由相对定位引起的.您正在应用position：相对于您的所有元素.然后你将它们全部向右移动到左边：400px和左边：535px和左边：100px等.左边的属性定义了从左边缘推动元素的距离.
此外,当元素相对定位时,保留其原始空间.因此,当元素向右移动时,它们也保持原始空间(即使它们不再存在),并且文档正在水平延长.
删除所有左侧属性并查看差异.一切都向左移动,水平滚动条消失. DEMO
我不确定你的布局目标是什么,但是,仅仅为了对比,这里有一个可供考虑的替代方案：而不是相对尝试绝对定位,它从文档流中删除元素,因此它们的原始空间被消除.
这是MDN：https://developer.mozilla.org/en-US/docs/Web/CSS/position的一个很好的参考
总结以上是内存溢出为你收集整理的html – 为什么我的网站右边有空格？全部内容，希望文章能够帮你解决html – 为什么我的网站右边有空格？所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）