防止浮动元素的换行

Question

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

问题是登录会破坏新行，我不知道如何预防。浮动元素不起作用。

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

Answer 2

你必须小心宽度。导航宽度压倒其他div。而且，如果我没有弄错的话，div有一个内置的换行符。上面的答案有一个解决方案，我也玩了几个编辑：你可以复制这个css：

/ 标题选项 /

标题{

width:100%;
background-color:green;
height:125px;

}

logoHolder {

width: 100px;
background-color: red;
float:left;

}

导航{

width:344px;
background-color:blue;
float:left;

}

loginHolder {

width:100px;
background-color:yellow;
float:left;

}