0

3 つのクラスの要素を配置するヘッダーがあります。

1 つ目はロゴで、左にフロートする必要があります。2 つ目はメニューで、中央に配置する必要があります。3 つ目はボタンで、右にフロートする必要があります。

私は次のようにこの構造を達成しようとしています:

<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を与えると右側のスペースを余白で全部取り、ボタンを次の行に押し込んでしまいます。どうすれば私が望むものを達成できますか?

状況はこのフィドルで説明されています: http://jsfiddle.net/3LAz7/

4

2 に答える 2

3

これを修正するには、.menu div を最後に配置します。したがって、新しい HTML は次のようになります。

<div class="header">
    <div class="logo"></div>
    <div class="button"></div>
    <div class="menu"></div>
</div>
于 2013-09-27T11:31:08.180 に答える
2

メニュー div を最後の要素に変更します。

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

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

于 2013-09-27T11:31:56.937 に答える