浮动不按预期工作

Question

我有一个导航框，＆＃34;联系人＆＃34;尽管浮动设置为正确，但元素并非完全右对齐。

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

这将解决您的问题

小提琴：http://jsfiddle.net/TQFzS/4/