2016-07-13 42 views
1

我有一個簡單的問題。我試圖在論壇上找到自己的一切,但沒有運氣,所以我會很直接。我創建了這個導航欄,但遇到了一個問題。當我放大時,它會完美放大,不會發生衝突或任何事情,但它不會向左或向右滾動(同時放大時不顯示整個導航欄)。放大時在網頁上滾動

<html> 

<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel='stylesheet' href='design.css' /> 
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 

<script src="brain.js"></script> 

<body> 
<div class="wrap"> 
    <div id="navigation"> 
     <ul> 
      <li><a href="#"> Home</a> </li> 
      <li><a href="#"> Top rated</a> </li> 
      <li><a href="#"> Suggestions</a> </li> 
      <li><a href="#"> Latest news</a> </li> 
      <li><a href="#"> About</a> </li> 
      <li><a href="#"> Contact us</a> </li> 
     </ul> 
    </div> 
<div > 

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

</html> 

CSS:

body { 
margin: 0px; 
padding: 0px; 
} 

.wrap { 
width: 80%; 
margin: 0 auto; 
height: 800px; 
} 

#navigation { 
height: 40px; 
font-size: 14px; 
font-weight: bold; 
text-shadow: 3px 2px 3px #333333; 
width: 100%; 
min-width: 800px; 
} 

#navigation a { 
text-decoration: none; 
color: #00F; 
padding: 13px 12px 12px 12px; 
color: white; 
} 

#navigation li { 
display: inline-block; 
} 

#navigation ul { 
background-color: #3d3f45; 
text-align: left; 
padding: 10.5px 0px; 
margin: 0px; 
} 

#navigation ul li:hover a { 
background-color: rgb(148, 145, 145) 
} 
+0

的問題將是如何使滾動放大時 – StasVB

回答

0

多數民衆贊成口述是否有滾動條(你的情況)<html>元素的元素。如果你要看看你在該行所提供的css文件鏈接:

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">

你會看到這樣的事情:html{overflow-x:hidden}

此行是導致該問題。你將不得不寫一些覆蓋它的CSS。我繼續創建了一個演示代碼,顯示修復。見下面的鏈接:

http://codepen.io/anon/pen/KrybjR