2017-08-09 97 views
0

所以,我到這個代碼的每一處都會在垂直滾動條上出現奇怪的現象。如果你知道它是什麼,告訴我這個錯誤以及我如何解決它。爲什麼我的網站上有一個水平滾動條?

錯誤可能是在css但我包括所有的代碼,所以你可以看看。

我會給你所有的代碼,你告訴我什麼是錯的。 Thx

我需要寫一些隨機單詞,所以我可以發表這個。

*::selection { 
 
    background: #333; 
 
} 
 
*::-moz-selection { 
 
    background: #333; 
 
} 
 
@font-face { 
 
    font-family: 'watchmen'; 
 
    src: url('--watchmen---webfont.woff2') format('woff2'),url('--watchmen---webfont.woff') format('woff'); 
 
    font-weight: normal; 
 
    font-style: normal; 
 
} 
 

 
body { 
 
\t background-color: red; 
 

 
\t font-family: 'Hind', sans-serif; 
 
} 
 
* { 
 
\t padding: 0; 
 
\t margin: 0; 
 
} 
 

 
#titletext { 
 
\t font-family: watchmen; 
 
\t color: #FEEE2E; 
 
\t font-size: 6.5vw; 
 
} 
 
#logo_span { 
 
\t color: #146EAD; 
 
} 
 
#linktotwo { 
 
\t text-decoration: none; 
 
\t color: #146EAD; 
 
} 
 
#title { 
 
\t 
 
\t position: absolute; 
 
\t width: 82vw; 
 
\t height: 12vh; 
 
\t text-align: center; 
 
\t line-height: 12vh; 
 
\t top: 50%; 
 
\t left: 50%; 
 
\t margin-top: -6vh; 
 
\t margin-left: -41vw; 
 
} 
 
#one { 
 
\t background-color: #030200; 
 
\t background-size: cover; 
 
\t width:100vw; 
 
    height: 100vh; 
 
} 
 
#two { 
 
\t height: 100vh; 
 
\t width: 100vw; 
 
\t background-color: #0B4F77; 
 
} 
 
#favul { 
 
\t list-style-type: decimal; 
 
    font-family: 'Josefin Sans', sans-serif; 
 
    padding-left: 8vw; 
 
    margin: 6.5vh auto; 
 
} 
 
#favul > li { 
 
\t margin: 1vw 0; 
 
} 
 
#favtit { 
 
\t text-align: center; 
 
} 
 
#fav { 
 
\t border: 1px solid #000; 
 
\t position: absolute; 
 
\t font-size: 48px; 
 
\t left: 50%; 
 
\t padding: 15px; 
 
\t width: 600px; 
 
\t height: 50vh; 
 
\t margin-left: -316px; 
 
\t overflow: hidden; 
 
\t top: 150vh; 
 
\t margin-top: -32vh; 
 
\t background-color: #0A4366; 
 
} 
 

 
#flash { 
 
\t color: #FF4500; 
 
} 
 
#bat { 
 
\t color: #000; 
 
} 
 
#arrow { 
 
\t color: green; 
 
} 
 
#manh { 
 
\t color: #1580c1; 
 
} 
 

 
#images { 
 
\t position: absolute; 
 
\t bottom: 0%; 
 
\t left: 0%; 
 
} 
 
#images > img { 
 
\t width: 100%; 
 
}
<html lang="en"> 
 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>I Love DC Comics</title> 
 
\t <meta charset="UTF-8"> 
 
\t <link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" /> 
 
\t <link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" /> 
 
\t <meta name="description" 
 
\t content="I just love DC Comics and I write some stuff on this Website"/> 
 
\t <meta name="robots" content="index,follow"/> 
 
\t <link rel="stylesheet" type="text/css" href="styles.css"> 
 
\t <link href="https://fonts.googleapis.com/css?family=Hind:600" rel="stylesheet"> 
 
\t <link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300" rel="stylesheet"> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
\t <script type="text/javascript" src="jumpto.js"></script> 
 
\t <script type="text/javascript" src="script.js"></script> 
 
</head> 
 
<body> 
 

 
<div id="one"> 
 
<div id="title"> 
 
<p id="titletext">ONLY DC <span id="logo_span"><a id="linktotwo" href="#two">&#164;</a></span> COMICS!</p> 
 
</div> 
 
</div> 
 

 
<div id="two"> 
 
<div id="fav"> 
 
<p id="favtit">My Favorite Characters</p> 
 
<ul id="favul"> 
 
\t <li>The <span id="flash">Flash</span></li> 
 
\t <li><span id="bat">Batman</span></li> 
 
\t <li><span id="arrow">Green</span> Arrow</li> 
 
\t <li>Dr. <span id="manh">Manhattan</span></li> 
 
</ul> 
 

 
<div id="images"> 
 
<img src="characters.jpeg" alt="characters"/> 
 
</div> 
 

 
</div> 
 
</div> 
 
</body> 
 
</html>

回答

1
#one { 
width: 100%; 
} 

#two { 
width: 100%; 
} 
1

所有vw首先是不一樣的%。看看這樣的解釋:

Difference between Width:100% and width:100vw?

所以,你必須使用%代替vw,也是我會給#favbox-sizing: border-box

*::selection { 
 
    background: #333; 
 
} 
 
*::-moz-selection { 
 
    background: #333; 
 
} 
 
@font-face { 
 
    font-family: 'watchmen'; 
 
    src: url('--watchmen---webfont.woff2') format('woff2'),url('--watchmen---webfont.woff') format('woff'); 
 
    font-weight: normal; 
 
    font-style: normal; 
 
} 
 

 
body { 
 
\t background-color: red; 
 

 
\t font-family: 'Hind', sans-serif; 
 
} 
 
* { 
 
\t padding: 0; 
 
\t margin: 0; 
 
} 
 

 
#titletext { 
 
\t font-family: watchmen; 
 
\t color: #FEEE2E; 
 
\t font-size: 6.5vw; 
 
} 
 
#logo_span { 
 
\t color: #146EAD; 
 
} 
 
#linktotwo { 
 
\t text-decoration: none; 
 
\t color: #146EAD; 
 
} 
 
#title { 
 
\t 
 
\t position: absolute; 
 
\t width: 82vw; 
 
\t height: 12vh; 
 
\t text-align: center; 
 
\t line-height: 12vh; 
 
\t top: 50%; 
 
\t left: 50%; 
 
\t margin-top: -6vh; 
 
\t margin-left: -41vw; 
 
} 
 
#one { 
 
\t background-color: #030200; 
 
\t background-size: cover; 
 
\t width:100%; 
 
    height: 100vh; 
 
} 
 
#two { 
 
\t height: 100vh; 
 
\t width: 100%; 
 
\t background-color: #0B4F77; 
 
} 
 
#favul { 
 
\t list-style-type: decimal; 
 
    font-family: 'Josefin Sans', sans-serif; 
 
    padding-left: 8vw; 
 
    margin: 6.5vh auto; 
 
} 
 
#favul > li { 
 
\t margin: 1vw 0; 
 
} 
 
#favtit { 
 
\t text-align: center; 
 
} 
 
#fav { 
 
\t border: 1px solid #000; 
 
\t position: absolute; 
 
\t font-size: 48px; 
 
\t left: 50%; 
 
\t padding: 15px; 
 
\t width: 600px; 
 
\t height: 50vh; 
 
\t margin-left: -302px; 
 
\t overflow: hidden; 
 
\t top: 150vh; 
 
\t margin-top: -32vh; 
 
\t background-color: #0A4366; 
 
    box-sizing: border-box; 
 
} 
 

 
#flash { 
 
\t color: #FF4500; 
 
} 
 
#bat { 
 
\t color: #000; 
 
} 
 
#arrow { 
 
\t color: green; 
 
} 
 
#manh { 
 
\t color: #1580c1; 
 
} 
 

 
#images { 
 
\t position: absolute; 
 
\t bottom: 0%; 
 
\t left: 0%; 
 
} 
 
#images > img { 
 
\t width: 100%; 
 
}
<html lang="en"> 
 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>I Love DC Comics</title> 
 
\t <meta charset="UTF-8"> 
 
\t <link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" /> 
 
\t <link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" /> 
 
\t <meta name="description" 
 
\t content="I just love DC Comics and I write some stuff on this Website"/> 
 
\t <meta name="robots" content="index,follow"/> 
 
\t <link rel="stylesheet" type="text/css" href="styles.css"> 
 
\t <link href="https://fonts.googleapis.com/css?family=Hind:600" rel="stylesheet"> 
 
\t <link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300" rel="stylesheet"> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
\t <script type="text/javascript" src="jumpto.js"></script> 
 
\t <script type="text/javascript" src="script.js"></script> 
 
</head> 
 
<body> 
 

 
<div id="one"> 
 
<div id="title"> 
 
<p id="titletext">ONLY DC <span id="logo_span"><a id="linktotwo" href="#two">&#164;</a></span> COMICS!</p> 
 
</div> 
 
</div> 
 

 
<div id="two"> 
 
<div id="fav"> 
 
<p id="favtit">My Favorite Characters</p> 
 
<ul id="favul"> 
 
\t <li>The <span id="flash">Flash</span></li> 
 
\t <li><span id="bat">Batman</span></li> 
 
\t <li><span id="arrow">Green</span> Arrow</li> 
 
\t <li>Dr. <span id="manh">Manhattan</span></li> 
 
</ul> 
 

 
<div id="images"> 
 
<img src="characters.jpeg" alt="characters"/> 
 
</div> 
 

 
</div> 
 
</div> 
 
</body> 
 
</html>