Html 浮动未按预期工作

我有一个导航框，尽管float设置为right，但“Contact”元素并不是完全正确的

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

其他问题似乎建议交换左右元素以获得所需的效果，但这不起作用

---

您在

ul

元素上缺少

溢出：隐藏

看看这个

溢出：建议在浮动元素的父级上隐藏
。它迫使家长将所有这些内容都包含在内，从而防止您在经历时出现奇怪的行为。
我相信您正在搜索
边距，但处于负位置，例如：

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

那会解决你的问题

Fiddle:
你是说右边有一个小间隙吗？右边的间隙之所以存在，是因为你在第一个元素上有填充，并且没有补偿……要么把边距放对：2px；在#右侧元素上，或溢出：隐藏，在ul上
#right {
float: right;
margin: 0 -3px 0;
}