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;
}

然而，当菜单给出边距0自动时，右边的所有空间都有边距，按钮被推到下一行。我怎样才能实现我的目标？

在这个小提琴中解释了这种情况：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/

浮动div之间的余量自动

2 个答案: