플로트가 예상대로 작동하지 않습니다.

Question

플로팅이 오른쪽으로 설정되어 있음에도 불구하고 탐색 상자가 있으며 "연락처"요소가 완전히 오른쪽 맞춤되지 않았습니다.

<div id="navwrapper"> 
    <ul> 
     <li class="single">Home</li> 
     <li class="double" id="left">About</li> 
     <li class="double" id="right">Contact</li> 
     <li class="single">Book</li> 
    </ul> 
</div> 

그리고 CSS는

#right { 
    float:right; 
} 

다른 질문은 원하는 효과를 얻기 위해 왼쪽과 오른쪽 요소를 통해 스와핑을 제안하는 것, 그러나 그것은 작동하지 않았다.

jsFiddle

Answer 1

당신은 당신의 ul 요소에 overflow:hidden 누락되었다.

확인하십시오. working jsFiddle

overflow:hidden은 플로팅 요소의 부모에 권장됩니다.

#right { 
float: right; 
margin: 0 -3px 0; 
} 

하면 해결됩니다 : 그것은 당신이 경험 한 것처럼 이렇게 이상한 행동을 방지, 그들 모두 주위를 감싸는 부모 ..

Answer 2

내가 예를 들어, 당신은 margin뿐만 마이너스 위치에서 검색 보라 강제 문제

바이올린 : http://jsfiddle.net/TQFzS/4/