브라우저 <nav> 요소

Question

이 내 웹 페이지 모습입니다의 위치를 ​​변경합니다. 그러나 브라우저의 크기를 조정하면 요소가 위치를 변경하고 세로 스크롤 막대로 이동합니다! 상단에 고정시키는 방법?

내 HTML5 코드 :

Answer 1

당신은 크기를 조정하는 경우 :

<header id="container"> 
     <div id="logo"> 
      <a id="index" href="index.html"><img src="img/LOGO.PNG" alt="Scope in CST" /></a> 
     </div> 

     <nav id="menu"> 
      <a href="about.html">About</a> 
      <a href="events.html">Events</a> 
      <li id="smenu"><a href="#">Communities</a> 
      <ul class="submenu"> 
       <li><a href="#">Speakers</a></li> 
       <li><a href="#">Students</a></li> 
       <li><a href="#">Ambassadors</a></li> 
       <li><a href="#">Technology</a></li> 
       <li><a href="#">Idea</a></li> 
      </ul></li> 
      <a href="#">Angel Investors</a> 
      <a href="contact.html">Contact Us</a> 
      <a href="timeline.html">Timeline</a> 
      <Button type="button" onClick="location.href='memebrs.scopecst.org';">Login</Button> 
     </nav> 
    </header> 

이것은 내가 지금까지 CSS에서 무슨 짓을했는지입니다 귀하의 브라우저, 요 u가 화면 전체의 너비를 변경하기 때문에 메뉴가 적합하지 않습니다. 또한 항법 장치에 높이가 설정되어 있기 때문에 항법 장치에 없을 것입니다. 항법 장치가 같은 크기를 유지하고 로그인 단추가 라인업에서 튀어 나오게됩니다. margin-left: 150px; (코드를 자세히 보았 기 때문에) 로그인 버튼이 아래로 점프하므로 로그인 버튼은 항상 왼쪽에서 150px 떨어져 있어야합니다. 잠재적 수정 (가장 이상적인 수정 사항은 아니지만) 대신 로그인 버튼에 float: right;을 사용하는 것이 좋습니다. 페이지 크기를 조정하면 메뉴가 <nav>에 가깝게 밀려납니다.