2016-07-13 2 views
1

빠른 질문이 있습니다. 나는 포럼에서 모든 것을 스스로 찾으려고 노력했지만 운이 없다. 그래서 나는 간단해질 것이다. 이 navbar를 만들었지 만 문제가 있습니다. 확대 할 때 완벽하게 확대되거나 충돌하지 않거나 아무것도 스크롤하지 않지만 왼쪽 또는 오른쪽으로 스크롤하지 않습니다 (동시에 확대했을 때 전체 탐색 모음을 표시하지 않습니다). 확대했을 때 웹 스크롤

<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 파일 링크를 확인한다면 :이 줄은 문제를 일으키는 html{overflow-x:hidden}

:

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

이 같은 것을 볼 것입니다. 이를 오버라이드하는 CSS를 작성해야합니다. 나는 그 문제를 보여주는 시범 적 코돈을 만들었다. 아래 링크를 참조하십시오 :

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

관련 문제