html - 浮动 div 之间的边距自动

Question

我有一个标题，我想在其中放置三类元素。

第一个是标志，它应该浮动到左边。第二个是菜单，应该居中。第三个是一个按钮，应该向右浮动。

我正在尝试按如下方式实现此结构：

<div class="header">
    <div class="logo"></div>
    <div class="menu"></div>
    <div class="button"></div>
</div>

.logo {
    float: left;
}
.menu {
    margin: 0 auto;
}
.button {
    float: right;
}

然而，当margin 0 auto 被赋予菜单时，它会占用右边所有的空间和margin，并且按钮被推到下一行。我怎样才能达到我想要的？

在这个小提琴中解释了这种情况：http: //jsfiddle.net/3LAz7/

Answer 1

要解决此问题，您需要将 .menu div 放在最后。所以新的 HTML 将是

<div class="header">
    <div class="logo"></div>
    <div class="button"></div>
    <div class="menu"></div>
</div>

Answer 2

将您的菜单 div 更改为最后一个元素。

<div class="header">
    <div class="logo"></div>
    <div class="button"></div>
    <div class="menu"></div>
</div>

http://jsfiddle.net/3LAz7/1/