Поплавок не работает как ожидалось

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

Вы отсутствовали overflow:hidden на вашем ul элементе.

Проверьте это working jsFiddle.

overflow:hidden рекомендуется для родителя плавающих элементов. Это заставляет родителей, чтобы обернуть вокруг всех из них, таким образом предотвращая странное поведение, как вы испытывали ..

Answer 2

Я верю, вы ищете margin, но в минус позиции, например:

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

Это исправит ваш вопрос

Fiddle: http://jsfiddle.net/TQFzS/4/