我设计了一个网页。[英] I designed one webpage.

问题描述

我设计了一个网页,但它水平滚动.我不想要那个.我放置的宽度和高度是 100%.我不知道是什么问题.

这是代码:

正文{宽度:100%;高度:100%;margin:0px;填充:0px;font-family:"museo-sans-rounded", lucida grande, sans-serif;}#标题{float:left;高度:13%;宽度:100%;背景色:#e3e3e3;}#header img{float:left;margin-left:20px;高度:76px;宽度:200px;}#header h1{padding-top:20px;float:left;font-family:Verdana、Arial、Helvetica、sans-衬线;font-size:40px;}#header ul {float:right;margin-top:60px;margin-right:10px;}#header ul li{显示:内联;位置:相对;margin-left:20px;高度:20px;宽度:100px;背景色:#993366;border-radius:5px;}#header li a{font-family: verdana;font-size: 11px;text-decoration: none;背景色:#A8D7FD;color:黑色;padding-top:5px;padding-left:10px;padding-right:10px;padding-bottom:4px;-moz-border-radius:5px;-webkit-border-radius:5px;}#header ul li a:hover{border-radius:5px;背景色:#00CCFF;}#页脚{float:left;高度:8%;宽度:100%;/*border-top:2px solid #000000;*/背景色:#e3e3e3;}#页脚 h6{padding-top:15px;字体粗细:粗体;float:left;padding-left:400px;font-size:12px;}#main{float:left;高度:79%;宽度:100%;背景:-moz-linear-gradient(top,#E8E8E8,#FFFFFF);背景:-webkit-linear-gradient(top,#E8E8E8,#FFFFFF);背景:线性渐变(#f9d835, #fff);}#连接{float:left;高度:200px;宽度:150px;margin-left:200px;margin-top:30px;}p.连接{float:left;位置:相对;padding-top:9px;行高:20px;宽度:100px;高度:30px;color:#666;文本对齐:center;font-family: "museo-sans-rounded", lucida grande, sans-serif;字体样式:斜体;font-size:17px;背景:-webkit-gradient(white);-webkit-gradient(white);跨度>背景:-moz-linear-gradient(white);背景:-o-linear-gradient(#f04349,#c81e2b);背景:线性渐变(#f04349, #c81e2b);-webkit-border-radius:10px ;border:4px solid #666;-moz-border-radius:10px;border-radius:10px solid ;}.connect:after {content:"";位置:绝对;底部:-20px; /* value = -border-top-width -border-bottom-width */left:60px; /* value = (:before's left) + (:before's border-right/left-width) - (:after's border-right/left-宽度)*/border: 0;border-right-width:10px;/*改变这个值来改变顶点的角度*/border-bottom-width:20px;/* 改变这个值来改变三角形的高度.必须等于 :before */ 中的对应值border-style:solid;border-color:透明 #666;/*在FF3.0中减少伤害*/显示:屏蔽;宽度:0;}#解决{float:left;高度:200px;宽度:150px;margin-left:100px;margin-top:30px;}p.解决{float:left;位置:相对;padding-top:9px;行高:20px;宽度:100px;高度:30px;color:#666;文本对齐:center;font-family: "museo-sans-rounded", lucida grande, sans-serif;字体样式:斜体;font-size:17px;背景:-webkit-gradient(white);-webkit-gradient(white);跨度>背景:-moz-linear-gradient(white);背景:-o-linear-gradient(#f04349,#c81e2b);背景:线性渐变(#f04349, #c81e2b);-webkit-border-radius:10px ;border:4px solid #666;-moz-border-radius:10px;border-radius:10px solid ;}.解决:之后 {content:"";位置:绝对;底部:-20px; /* value = -border-top-width -border-bottom-width */left:60px; /* value = (:before's left) + (:before's border-right/left-width) - (:after's border-right/left-宽度)*/border:0;border-right-width:10px;/*改变这个值来改变顶点的角度*/border-bottom-width:20px;/* 改变这个值来改变三角形的高度.必须等于 :before */ 中的对应值border-style:solid;border-color:透明 #666;/*在FF3.0中减少伤害*/显示:屏蔽;宽度:0;}#成长{float:left;高度:200px;宽度:150px;margin-left:100px;margin-top:30px;}p.增长{float:left;位置:相对;padding-top:9px;行高:20px;宽度:100px;高度:30px;color:#666;文本对齐:center;font-family: "museo-sans-rounded", lucida grande, sans-serif;字体样式:斜体;font-size:17px;背景:-webkit-gradient(white);-webkit-gradient(white);跨度>背景:-moz-linear-gradient(white);背景:-o-linear-gradient(#f04349,#c81e2b);背景:线性渐变(#f04349, #c81e2b);-webkit-border-radius:10px ;border:4px solid #666;-moz-border-radius:10px;border-radius:10px solid ;}.grow:after {content:"";位置:绝对;底部:-20px; /* value = -border-top-width -border-bottom-width */left:60px; /* value = (:before's left) + (:before's border-right/left-width) - (:after's border-right/left-宽度)*/border:0;border-right-width:10px;/*改变这个值来改变顶点的角度*/border-bottom-width:20px;/* 改变这个值来改变三角形的高度.必须等于 :before */ 中的对应值border-style:solid;border-color:透明 #666;/*在FF3.0中减少伤害*/显示:屏蔽;宽度:0;}.h1{高度:10px;float:left;宽度:100%;padding-left:210px;font-family: "museo-sans-rounded", lucida grande, sans-serif;font-weight: 200;font-size:55px;字体样式:正常;margin-top:5px;}.内容{float:left;文本对齐:对齐;颜色:#FF6600;}#社交{float:left;margin-left:370px;宽度:100%;color:黑色;}.{高度:10px;padding-top:8px;padding-bottom:8px;float:left;padding-left:390px;font-family: "museo-sans-rounded", lucida grande, sans-serif;font-weight: 300;font-size:45px;字体样式:正常;margin-top:5px;}

推荐答案

仅仅用 width:100% 设置 body 标签并不能帮助你解决这个问题.您提到的 px 有一些地方会引起麻烦,如下面的这个.
padding-left:400px;


也试试这个来禁用水平滚动,
body{overflow-x:hidden}

本文地址:https://www.itbaoku.cn/post/1394971.html