html - 防止 float 元素换行

Question

我正在尝试创建一个网站的标题，该网站的 Logo 左对齐，导航 div 宽度为 960 像素且居中，登录区域右对齐。这是我的进度的屏幕截图

问题是登录换行，我不知道如何防止它。 float 元素不起作用。

这是一个Fiddle

但它不会产生与我在本地运行时看到的相同的结果。

HTML

<div id="header"><!-- Outside Container, Holds Logo and Log In -->
        <div id="logoHolder">
            <p>logo</p>
        </div>
        <div id="navigation">
            <p>navigation</p>
        </div>
        <div id="loginHolder">
            <p>login</p>
        </div>
    </div>

CSS

/*Header Options*/
#header{
    width:100%;
    background-color:green;
    height:125px;
}
    #logoHolder{
        float:left;
    }
    #navigation{

        width:960px;
        background-color:blue;
        margin-left:auto;
        margin-right:auto;
    }

    #loginHolder{
        float:right;
    }

Answer 1

只需将您的 HTML 重新排序为以下内容(将 loginHolder 移到 navigation 上方)即可正常工作:

<div id="header">
    <!-- Outside Container, Holds Logo and Log In -->
    <div id="logoHolder">
        <p>logo</p>
    </div>
    <div id="loginHolder">
        <p>login</p>
    </div>
    <div id="navigation">
        <p>navigation</p>
    </div>
</div>

jsFiddle example