2

メニューという div があり、その中にナビゲーション バー div と検索 div が必要です。ナビゲーションがメニュー div の中央に留まり、検索 div が左 (または右) に移動するようにします。このコードを試しましたが、位置を絶対に設定すると、ナビゲーションの左右のマージンを自動に設定しても機能しません。

CSS コード:

.menu{
    width: 100%;
    height: 65px;
    margin-bottom: 0.5%;
}

.search{
        width: 300px;
    height: 65px;
        float:left;
    z-index: 1;
    position:absolute;
}

.navigation{
    height: 65px;
    margin-left: auto;
    margin-right: auto;
    z-index: 0;
    display:inline-block;
    position: absolute;
}

HTML コード:

<div class="menu">
    <div class="navigation"> 
        .
        .
        .
    </div>

    <div class="search">
        .
        .
        .
    </div>
</div>
4

4 に答える 4

1

メニューの中央に移動したい場合 (中央に留まります)。これを試して ：

.menu{
    width: 100%;
    height: 65px;
    margin-bottom: 0.5%;
    margin-top:5px;
}

.search{
    width: 300px;
    height: 65px;
    float:left;
    z-index: 1;

}

.navigation{
    width:300px; /* you can change this */
    left: 50%; /* you can change this */
    margin-left: -150px; /* you can change this */
    height: 65px;
    display:inline-block;
    position: absolute;

}

cssdeck

  1. まず、left: 50%. これにより、ナビゲーションの左端が中央に移動します。

  2. その幅の半分 (ナビゲーション div の幅 : 300px) の負の左マージンを使用します。この例では、ボックスを正しい場所に戻すために を設定margin-leftする必要があります-150px

2015年更新

「位置」なしで実行できます。フレックスボックスを使用できます

.menu {
  width: 100%;
  height: 65px;
  margin-top: 5px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
}

.search{
  width: 300px;
  height: 65px;
  margin-left:10px;
}

.navigation{
  width:300px;
  height: 65px;
  margin:0 auto;
  margin-left:220px;
}
.navigation ul {
  list-style:none;
  margin-top:5px;
}
.navigation ul li {
  float:left;
  margin-left:5px;
  border:solid 1px;
}

cssdeck 2

于 2013-07-09T16:40:25.150 に答える
0

user2391454 は正しい軌道に乗っていると思います。位置が混乱することがありますが、完全に除外すると役立つ場合があります。CSS のすべての位置を取り出して、それが機能するかどうかを確認します。

我々に教えてください。

于 2013-07-09T16:33:40.797 に答える
0

position: absolute フローティングでは機能しません。実際には、絶対配置要素が必要な左と上からピクセルを設定する必要があります。

絶対的なポジショニングさえ本当に必要ないように思えますが、

http://codepen.io/anon/pen/KtgBa

于 2013-07-09T16:25:11.717 に答える