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

问题描述

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

代码如下:

I designed one webpage,but it scrolling horizontal.I don''t want that one.I placed width and height is 100%.I dont''t know what is the problem.

Here''s the code:

body{
width:100%;
height:100%;
margin:0px;
padding:0px;
font-family:"museo-sans-rounded", lucida grande, sans-serif;

}

#header{
float:left;
height:13%;
width:100%;
background-color:#e3e3e3;

}
#header img{
float:left;
margin-left:20px;
height:76px;
width:200px;



}

#header h1{
padding-top:20px;
float:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:40px;

}
#header ul {
float:right;
margin-top:60px;
margin-right:10px;
}
#header ul li{
display:inline;
position:relative;
margin-left:20px;
height:20px;
width:100px;
background-color:#993366;
border-radius:5px;

}
#header li a{
font-family: verdana;
font-size: 11px;
text-decoration: none;
background-color:#A8D7FD;
color:black;
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;
background-color:#00CCFF;
}
#footer{
float:left;
height:8%;
width:100%;
/*border-top:2px solid #000000;*/
background-color:#e3e3e3;
}
#footer h6{
padding-top:15px;
font-weight:bold;
float:left;
padding-left:400px;

font-size:12px;
}
#main{
float:left;
height:79%;
width:100%;

background:-moz-linear-gradient(top,#E8E8E8,#FFFFFF);
background:-webkit-linear-gradient(top,#E8E8E8,#FFFFFF);
background:linear-gradient(#f9d835, #fff);

}
#connect{
float:left;
height:200px;
width:150px;
margin-left:200px;
margin-top:30px;
}
p.connect{
float:left;
position:relative;
padding-top:9px;
line-height:20px;
width:100px;
height:30px;
color:#666;
text-align:center;
font-family: "museo-sans-rounded", lucida grande, sans-serif;
font-style:italic;
font-size:17px;
background:-webkit-gradient(white);
background:-moz-linear-gradient(white);
background:-o-linear-gradient(#f04349, #c81e2b);
background:linear-gradient(#f04349, #c81e2b);
-webkit-border-radius:10px ;
border:4px solid #666;
-moz-border-radius:10px;
border-radius:10px solid ;
}
.connect:after {
content:"";
position:absolute;
bottom:-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-width) */
border: 0;
border-right-width:10px; /* vary this value to change the angle of the vertex */
border-bottom-width:20px; /* vary this value to change the height of the triangle. must be equal to the corresponding value in :before */
border-style:solid;
border-color:transparent #666;
/* reduce the damage in FF3.0 */
display:block;
width:0;
}
#solve{
float:left;
height:200px;
width:150px;
margin-left:100px;
margin-top:30px;
}
p.solve{
float:left;
position:relative;
padding-top:9px;
line-height:20px;
width:100px;
height:30px;
color:#666;
text-align:center;
font-family: "museo-sans-rounded", lucida grande, sans-serif;
font-style:italic;
font-size:17px;
background:-webkit-gradient(white);
background:-moz-linear-gradient(white);
background:-o-linear-gradient(#f04349, #c81e2b);
background:linear-gradient(#f04349, #c81e2b);
-webkit-border-radius:10px ;
border:4px solid #666;
-moz-border-radius:10px;
border-radius:10px solid ;
}
.solve:after {
    content:"";
    position:absolute;
    bottom:-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-width) */
    border:0;
    border-right-width:10px; /* vary this value to change the angle of the vertex */
    border-bottom-width:20px; /* vary this value to change the height of the triangle. must be equal to the corresponding value in :before */
    border-style:solid;
    border-color:transparent #666;
    /* reduce the damage in FF3.0 */
    display:block;
    width:0;
}
#grow{
float:left;
height:200px;
width:150px;
margin-left:100px;
margin-top:30px;
}
p.grow{
float:left;
position:relative;
padding-top:9px;
line-height:20px;
width:100px;
height:30px;
color:#666;
text-align:center;
font-family: "museo-sans-rounded", lucida grande, sans-serif;
font-style:italic;
font-size:17px;
background:-webkit-gradient(white);
background:-moz-linear-gradient(white);
background:-o-linear-gradient(#f04349, #c81e2b);
background:linear-gradient(#f04349, #c81e2b);
-webkit-border-radius:10px ;
border:4px solid #666;
-moz-border-radius:10px;
border-radius:10px solid ;
}
.grow:after {
    content:"";
    position:absolute;
    bottom:-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-width) */
    border:0;
    border-right-width:10px; /* vary this value to change the angle of the vertex */
    border-bottom-width:20px; /* vary this value to change the height of the triangle. must be equal to the corresponding value in :before */
    border-style:solid;
    border-color:transparent #666;
    /* reduce the damage in FF3.0 */
    display:block;
    width:0;
}
.h1{
height:10px;
float:left;
width:100%;
padding-left:210px;

font-family: "museo-sans-rounded", lucida grande, sans-serif;
font-weight: 200;
font-size:55px;
font-style:normal;
margin-top:5px;
}
.content{
float:left;
text-align:justify;
color:#FF6600;
}

#social{
float:left;margin-left:370px;width:100%;color:black;

}
.and{
height: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;
font-style:normal;
margin-top:5px;
}

推荐答案

仅将body标记设置为width:100%并不会帮助您.在某些地方您提到px会引起麻烦，例如下面的内容.

Just setting the body tag with width:100% wouldn''t help you on this. There are places where you mentioned px that would cause trouble, like this one below.

padding-left:400px;

也可以尝试禁用水平滚动，

Also try this to disable horizontal scrolling,

body{overflow-x:hidden}

这篇关于我设计了一个网页.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！