DIV 안에서 링크가 링크를 멈추게하려면 어떻게합니까?

나는 100 % 너비 DIV 안에 6 개의 링크가 있습니다.DIV 안에서 링크가 링크를 멈추게하려면 어떻게합니까?

브라우저의 크기를 줄이면 내 링크가 서로 겹치지 않고 이동하고 아래로 사라지게 할 수 있습니다. 나는 그들이 수평 div 안에 남아 있도록하고 싶습니다.

<div class="nav"> 
<a href="contact.htm" class="navlink">CONTACT</a> 
<a href="contact.htm" class="navlink">GET INVOLVED</a> 
<a href="contact.htm" class="navlink">Q+A</a> 
<a href="contact.htm" class="navlink">HOW IT WORKS</a> 
<a href="contact.htm" class="navlink">WHO WE ARE</a> 
<a class="logo" href="home.htm"></a> 
</div> 



.nav {width: 100%; height: 84px; float:left; background: #333;} 
.logo {width: 317px; height: 84px; float:left; background:url('img/lifesign.png');} 
.navlink {height:84px ;font-family: 'open_sansbold'; color:#FFF; text-align:center;line-height:84px;padding-left: 22px;padding-right:22px;float:right;font-size:80% }

출처

2012-12-06 Erik

.nav 클래스에 min-width을 설정하십시오.

.nav { 
    width: 100%; 
    height: 84px; 
    float: left; 
    background: #333; 

    min-width: 960px; /* or whatever width you need */ 
}

출처

2012-12-06 02:06:18

여기에 이상적인 것은 nav 및 기타 페이지 요소가 포함될 고정 너비의 div ('page'의 ID)를 만드는 것입니다. 나는 또한 좀더 불필요한 규칙뿐만 아니라 탐색 자체의 구조 일부를 정리할 자유를 취했다. 목록이 이상적이라고 생각합니다. 당신이 떠있는 이후로 순서를 뒤집을 수 있습니다하지만 그렇지 않으면 잘 작동합니다.

<html> 
    <head> 
     <style> 
     body { text-align: center; } 
     #container { width: 960px; margin: 0 auto; } 
     #nav { overflow: hidden; list-style: none; padding: 0; margin: 0; background: #333; } 
     #nav li { float: right; } 
     #nav li.logo { float: left; } 
     #nav li a { display: block; padding: 0px 22px; color:#FFF; background: #333; text-align:center; line-height:84px; font-family: 'open_sansbold'; font-size:80%; } 
     #nav li.logo a { width: 317px; height: 84px; background:url('img/lifesign.png') red; } 
     </style> 
    </head> 
    <body> 
     <div id="container"> 
      <ul id="nav"> 
       <li class="logo"><a href="home.htm"></a></li> 
       <li><a href="contact.htm">CONTACT</a></li> 
       <li><a href="contact.htm">GET INVOLVED</a></li> 
       <li><a href="contact.htm">Q+A</a></li> 
       <li><a href="contact.htm">HOW IT WORKS</a></li> 
       <li><a href="contact.htm">WHO WE ARE</a></li> 
      </ul> 
      <div id="main"> 
       <!-- page content here --> 
      </div> 
     </div> 
    </body> 
</html>

출처

2012-12-06 02:57:56 JPRO

또한 'margin : 0 auto;'를 사용하십시오. 고정 너비 '컨테이너'div를 페이지 중앙에 유지합니다. – JPRO

DIV 안에서 링크가 링크를 멈추게하려면 어떻게합니까?

답변

관련 문제