html - 浮动未按预期工作

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元素。

检查这个工作 jsFiddle。

overflow:hidden建议在浮动元素的父级上使用。它迫使父母将所有这些都包裹起来，从而防止您遇到的奇怪行为..

Answer 2

我相信您正在搜索margin但处于负位置，例如：

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

这将解决您的问题

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