Question

我只有一个网站的顶级导航。我想在用户登录控件等右侧浮动div。我在网上看了一下但尝试过但在Chrome / Firefox中无效。

使用Div和CSS在所有浏览器中正确执行此操作的确切方法是什么？我只在IE 9中工作过.. Chrome和Firefox都将loginControls Div下放到下一行。

<div id="topNav">
    <div id="logoBar">
        <a href="index.html"><img src="images/header_logo.gif" width="132" height="50" border="0" /></a>

        <div id="loginControls">User: John Doe &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Logout</a></div>

    </div>
    <div id="navTabs">
        &nbsp;
    </div>
</div>

#logoBar {
    width: 1300px;
    height: 50px;
    background-image: url(../images/line.gif);
    background-repeat: repeat-x;
    padding: 0px 22px;
    position: relative;
}

#navTabs {
    background-color: #333b52;
    height: 30px;
}

#loginControls {
    color: #FFF;
    position: absolute;
    right: 0;
    width: 250px;
}

#loginControls a:link, #loginControls a:visited, #loginControls a:active {
    color: #FFF;
    text-decoration: underline;
}

Answer 1

添加

float : right;

在#loginControls＆＃39; CSS

Answer 2

只要你删除绝对定位，只需添加浮动的人就是正确的。

#logoBar {
    width: 1300px;
    height: 50px;
    background-image: url(../images/line.gif);
    background-repeat: repeat-x;
    padding: 0px 22px;
    position: relative;
}

#navTabs {
    background-color: #333b52;
    height: 30px;
}

#loginControls {
    float:right
}

#loginControls a:link, #loginControls a:visited, #loginControls a:active {
    color: #000;
    text-decoration: underline;
}

<div id="topNav">
    <div id="logoBar">
        <a href="index.html"><img src="images/header_logo.gif" width="132" height="50" border="0" /></a>

        <div id="loginControls">User: John Doe &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Logout</a></div>

    </div>
    <div id="navTabs">
        &nbsp;
    </div>
</div>

Answer 3

div的本质是始终使用父容器宽度的100％。您可能必须尝试跨度而不是登录控件的div。

或使用float：

#LoginControls {
    float:right;
    width: 250px;
}

我还不能测试它，但我希望我是对的。 ;）

编辑：确定有人比我更快但是你尝试了跨度吗？

如何在所有主流浏览器中右对齐嵌套div？

3 个答案: