Навигация разбивается на новую строку

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> тег. Таким образом, вы должны удалить margin и padding в <ul>, как показано ниже:

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; 
}