Question

我在导航栏中对齐某些元素时遇到了问题。

以下是jsfiddle的一个示例：http://jsfiddle.net/flobar/b7nzR/

这是html：

<div id="nav">
    <div id="menu">Menu</div>
    <div id="logo">Logo</div>
    <div id="settings">Settings</div>
</div>

这是css：

#nav {
    height: 60px;
    border: 1px solid #ccc;    
}

#menu {
    width: 70px;
    height: 30px;
    margin-top: 15px;
    float: left;
    background: #ccc;
}

#logo {
    width: 200px;
    height: 30px;
    margin: 15px auto 0 auto;
    background: #ccc;
}

#settings {
    width: 70px;
    height: 30px;
    margin-top: 15px;
    float: right;
    background: #ccc;
}

问题是最右边的区块被中心区域推倒了，但我不确定原因。

任何人都可以帮忙。

Answer 1

我会解释你在那里发生了什么，你的第一个div设置为float: left;，它会很好地浮动，现在你的第二个div也没有浮动{{1 }}或left所以它占据了整个可用的水平空间，导致第三个right在下面呈现。

Demo

div

现在我知道您希望将#logo { width: 200px; height: 30px; margin: 15px auto 0 auto; background: #ccc; float: left; margin-left: 120px; }居中对齐，所以在这种情况下，请{m} #logo #logo div

position: absolute;

Demo 2

Answer 2

您还必须浮动#logo;

 #logo {
    float:left;
    width: 200px;
    height: 30px;
    margin: 15px auto 0 auto;
    background: #ccc;
}

example

Answer 3

    #nav {
        height: 60px;
        border: 1px solid #ccc;  
display:table;  
    }

    #menu {
        width: 70px;
        height: 30px;
        margin-top: 15px;
        float: left;
        background: #ccc;
display: inline-table;
    }

    #logo {
        width: 200px;
        height: 30px;
        margin: 15px auto 0 auto;
        background: #ccc;
display: inline-table;
    }

    #settings {
        width: 70px;
        height: 30px;
        margin-top: 15px;
        float: right;
        background: #ccc;
        display:inline-table
    }

将非浮动元素置于具有浮动元素的元素内

3 个答案: