Question

我知道有类似的问题，但我无法确切地知道该怎么做。这是一张图片，展示了我想做的事情。

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

容器div中的3个div可能是个不错的选择吗？我想将横幅和导航栏保持在中心，尺寸与显示的相同。

如何填充剩余空间，使我的导航栏看起来像是100％宽度？

*（我尝试了100％，导航栏的按钮变得太大了。）

Answer 1

如果我理解正确的话.. 1）将它们（横幅和导航）放在一个全宽的包装div中。 2）然后给横幅和导航自己一个设定的宽度和“margin：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;
}

如何使div填补剩余空间？

1 个答案: