html – 为什么相对定位会成为水平滚动条？

概述我试图使用相对位置来定位一些文本/图片,但是当使用相对时,它会创建一个滚动条,尽管内容不在那里.除了溢出之外,有没有办法让它不这样做：隐藏？ 对象的CSS是 body {background-image:url('../images/logo1.jpg'); background-repeat:no-repeat; background-size: cover;}body 我试图使用相对位置来定位一些文本/图片,但是当使用相对时,它会创建一个滚动条,尽管内容不在那里.除了溢出之外,有没有办法让它不这样做：隐藏？

对象的CSS是

body {background-image:url('../images/logo1.jpg');    background-repeat:no-repeat;    background-size: cover;}body {color:black;}a,a:visited { color:white; text-decoration:none;}div#header {Font-size:280%;float:right;text-decoration:underline;}#nav {margin:0;padding:0;background:#808259 url(nav_bg.jpg) 0 0 repeat-x;wIDth:100%;border:1px solID #42432d;border-wIDth:1px 0;position:absolute;top:100px;left:0px;Font-size:175%;}    #nav li {        display:inline;        padding:0;        margin:0;    }    #nav a:link,#nav a:visited {        color:#000;        background:#b2b580;        padding:20px 40px 4px 10px;        float:left;        wIDth:auto;        border-right:1px solID #42432d;        text-decoration:none;        Font:bold 1em/1em Arial,Helvetica,sans-serif;        text-transform:uppercase;        text-shadow: 2px 2px 2px #555;    }    #nav a:hover,#nav a:focus {        color:#fff;        background:#727454;    }    #nav li:first-child a {        border-left:1px solID #42432d;    }    #home #nav-home a,#about #nav-about a,#archive #nav-archive a,#lab #nav-lab a,#revIEws #nav-revIEws a,#contact #nav-contact a {        background:#e35a00;        color:#fff;        text-shadow:none;    }    #home #nav-home a:hover,#about #nav-about a:hover,#archive #nav-archive a:hover,#lab #nav-lab a:hover,#revIEws #nav-revIEws a:hover,#contact #nav-contact a:hover {        background:#e35a00;    }    #nav a:active {        background:#e35a00;        color:#fff;        Font-size:150%;    }div.logoimg {position:absolute;left:0;top:0;}div#support {text-align:center;Font-size:250%;color:#CC3300;position:relative;top:90px;left:34%;text-decoration:underline;Font-weight:bold;}div#photo img{margin-top:7%;margin-left:30%;}p#follow {position:relative;left:50%;top:-40px;Font-size:250%;color:white;text-decoration:underline;Font-weight:bold;margin-top:5}div#facebook img{position:relative;left:50%;top:-40px;}div#sitemap {Font-size:200%;text-decoration:underline;Font-weight:bold;color:white;position:relative;left:600px; top:-200px;}ul#site {Font-size:175%;margin-top:-10%;margin-left: 33%;padding-left: 0;color:white;}@media (min-wIDth : 1300px) and (max-wIDth : 1400px) {div#support {text-align:center;Font-size:150%;color:#CC3300;position:relative;top:90px;left:60%;text-decoration:underline;Font-weight:bold;wIDth:40%;}div#photo {margin-top:3%;height:50%;wIDth:50%;}div#sitemap {Font-size:200%;text-decoration:underline;Font-weight:bold;color:white;position:relative;left:400px; top:-200px;}div#facebook img{position:relative;left:50%;top:-50px;}ul#site {Font-size:175%;margin-top:-13%;margin-left: 33%;color:white;}

解决方法 如果您尝试定位文本,它可能有100％的宽度(如块元素那样).你可能无法看到它,但是很有可能通过左转：800px;在你的元素上,它正在推动它的边界,越过屏幕的边缘.

使用绝对定位时不会发生这种情况,因为它基本上会告诉所有内容忽略元素占用的空间.

你可以尝试确保你定位的所有元素都设置为display：inline;或显示：inline-block;和/或在元素上设置一个宽度,使其保持在屏幕宽度上.

总结

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

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