1

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

这是关于 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;
}

问题是最右边的街区被中心街区推下，但我不知道为什么。

任何人都可以帮忙吗？

4

3 回答 3

1

我将向您解释那里发生了什么，您的第一个div设置float: left;将很好地浮动，现在您的第二个div也没有浮动，left因此right它占用了整个可用水平空间，导致第三个div在下面渲染。

演示

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

现在我知道你想要#logo在这种情况下居中对齐你的事实，让你的#logo div position: absolute;

#nav {
    height: 60px;
    border: 1px solid #ccc;   
    position: relative; /* Be sure you use this else your div will fly out in the wild */
}

#logo {
    width: 200px;
    height: 30px;
    margin: 15px auto 0 auto;
    background: #ccc;
    position: absolute; /* Takes your element out of the flow*/
    left: 50%; /* 50% from the left */
    margin-left: -100px; /* 1/2 of total width to ensure that it's exactly centered */
}

演示 2

于 2013-08-24T10:17:57.133 回答
0 
    #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
    }
于 2013-08-24T10:26:11.477 回答
0

您还必须浮动#logo；

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

例子

于 2013-08-24T10:17:45.267 回答