내비게이션이 새 줄로 바뀜

Question

네비게이션은 "margin-right : 4 %"를 "nav li"에 추가하자마자 두 번째 줄로 나옵니다 .- % 대신 px를 사용하면 문제가 발생하지 않습니다. : "margin-right : 10px". 이

jsfiddle을 일어나는 이유는 확실하지 않다 : http://jsfiddle.net/k93K2/

<header> 
     <div id="container"> 
      <div id="logo"> 
       <a href="#"><img src="http://placehold.it/220x80"/></a> 
      </div> 
      <nav> 
       <ul> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">Services</a></li> 
        <li><a href="#">Gallery</a></li> 
        <li><a href="#">Team</a></li> 
        <li><a href="#">Contact</a></li> 
       </ul> 
      </nav> 
     </div><!--container--> 
</header> 

- 코드의 문제를 들어

.container { 
    max-width: 1070px; 
    margin: 0 auto; 
} 

header { 
    overflow: hidden; 
} 

#logo { 
    float: left; 
} 

nav { 
    float: right; 
} 

nav li { 
    display: inline; 
    text-align: center; 
    margin-right: 4%; 
} 

Answer 1

은 마진과 패딩 <ul> 태그입니다. 그래서 당신은 아래와 같은 <ul>에 margin 및 padding를 제거해야합니다

nav { 
    float: left; 
    width: 220px; 
}  
ul { 
    margin: 0; 
    padding: 0; 
} 

시도하십시오!

Answer 2

어떨까요?

header{ 
    width: 100%;  /* initialization */ 
    min-width: 590px; /* some min width */ 
} 

.container { 
    max-width: 1070px; 
    margin: 0 auto; 
} 

header { 
    overflow: hidden; 
} 

#logo { 
    float: left; 
} 

nav { 
    width: calc(190px + 20%); /* width of nav is (4x5)% + size of "HomeServicesGalleryTeamContact" */ 
    min-width: 370px;   /* set some min width */ 
    float: right; 
} 


nav li { 
    display: inline; 
    text-align: center; 
    margin-left: 4%; 
} 

Answer 3

% 컨테이너 폭에 따라 컨테이너 폭의에 당신이 4% 마진을 주어 때, 그때는 모든 li에 적용됩니다 .... 을 값의 상대를 받아 4%에 오른쪽 여백을 밀어!

새로운 라인에 침입 컨텐츠를 방지하기 위해, 나는 귀하의 회신 white-space:nowrap example demo

에

header { 
    overflow: hidden; 
    white-space:nowrap; /*added*/ 
} 

nav ul { 
    display:inline-block; 
    white-space:nowrap;/*added*/ 
    border:1px solid red; 
}