플로팅 UL 오른쪽으로 인해 마지막 LI가 새 라인으로 떨어지거나 끊어집니다 - 왜?

Question

오른쪽으로 수 평형 탐색을 만들려고합니다. 일단 그것이 오른쪽으로 뜨면 나는 모든 목록 항목을 왼쪽으로 띄운다. 마지막 목록 항목이 새 줄로 나옵니다.

여백 속성을 제거하면 문제가 사라집니다. 그러나 전체 영역을 클릭 할 수있게하기 위해 앵커 태그를 표시했기 때문에 마진은 매우 중요합니다. 터치 스크린 목적으로이 작업을 수행했습니다.

마진과 패딩을 사용하면서 오른쪽으로 수레가 늘어날 때 누구나 한 줄로 내 ul 디스플레이의 모든 단어를 만들 수 있습니까?

https://jsfiddle.net/samuelcrockford/4a8oovjs/1/#&togetherjs=P0dq57flOy

<nav> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Services</a></li> 
     <li><a href="#">Portfolio</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
</nav> 


nav { 
    float:right; 
    overflow: auto; 
} 

nav ul { 
    float:right; 
    list-style: none; 
} 

nav ul li { 
    float: left; 
    margin-left: 4%; 
} 

nav ul li:first-child { margin-left: 0;} 


nav ul li a { 
    display: block; 
    float: left; 
    font-size: 1em; 
    padding: 0 2%; 
} 

Answer 1

100 % 폭을 추가하십시오 :

*{ 
    box-sizing: border-box; 
} 

패딩 측면에서 문제를 해결하는 요소의 전체 너비에 테두리 너비와 패딩 크기가 모두 포함됩니다.

여백 값을 사용하여 해당 문제를 해결하십시오.

Answer 2

위의 JS 바이올린 링크를 사용하여 예제를 참조 border-box 모든 요소의 box-sizing 속성을 설정 UL 태그

 
    nav ul { 
     width:100%; 
    }