1

同様の質問があることは知っていますが、何をすべきかを正確に見つけることができませんでした。ここに私がやりたいことを示す画像があります。

http://s7.postimg.org/6wkq6376j/Question.jpg

コンテナ div 内の 3 つの div は適切なオプションでしょうか? バナーとナビゲーション バーを図と同じサイズで中央に配置したいと思います。

ナビゲーション バーの幅が 100% のように見えるように、残りのスペースを埋めるにはどうすればよいですか?

*(100%試したらナビゲーションバーのボタンが大きくなりすぎた)。

4

1 に答える 1

1

私があなたを正しく理解していれば.. 1）それぞれ（バナーとナビゲーション）を全幅のラッパーdivに入れます。2) 次に、バナーとナビゲーション自体に幅と「マージン: 0 auto;」を設定します。中央に浮かせます。3) 次に、ナビゲーション バーに一致するようにナビゲーション ラップに BG 画像を設定できます。これにより、ナビゲーション バーは完全に拡張されますが、ナビゲーションは固定幅のまま中央に配置されます。

以下のようなものです。より簡単に見るためのフィドルがあります: http://jsfiddle.net/s_Oaten/GTDBX/

HTML

<div class="header_wrap">
  <div class="banner"></div>
  <div class="nav_wrap">
    <div class="nav">
      <ul><li>Link</li><li>Link</li><li>Link</li><li>Link</li><li>Link</li></ul>
    </div>
  </div>

CSS

.header_wrap {
  height: 110px;
  margin: o auto;
  background: #0000dd;
}
.nav_wrap {
  height: 80px;
  margin: o auto;
  background: #707070;
}
.banner {
  height:110px;
  background: blue;
  margin: 0 auto;
  width: 600px;
}
.nav {
  height: 80px;
  background: grey;
  margin: 0 auto;
  width: 600px;
}
ul {margin: 0; padding: 0;}
.nav li {
  display: block;
  float: left;
  width: 20%;
  list-style: none;
  text-align: center;
}
于 2013-05-28T21:54:38.700 に答える