Question

我正在构建一个页面。此页面将有一个自定义导航栏。

导航栏尺寸 - 宽度：800px高度：100px。
身体bgcolor：灰色;导航栏bgcolor：蓝色。

由于导航栏宽度为800px并且为蓝色，我希望导航栏在页面上保持居中，但是在大屏幕的左右边缘保持蓝色拉伸。

我有什么想法可以做到这一点？

Answer 1

这样做，诀窍是自我左右自适应

.outer
    {
      background-color:Gray;
    }

    .inner
    {
     width:800px;
     height:100px;
    background-color:blue; 
    margin:0 auto 0 auto;
    }

      <div id="outer">
        <div id="inner">blah</div>
      </div>

Answer 2

不确定您是否得到了您正在寻找的答案，但为了清楚起见，您可以将导航元素嵌套并居中于具有100％宽度和类似样式的包装元素中，如下所示。

<div id="navWrap">
    <ul id="nav">
        <li>...</li>
    </ul>
</div>

<style type="text/css">
#navWrap {
    width:100%;
    background:blue;
}
#nav {
    width:800px;
    height:100px;
    margin:0 auto;
    background:blue;
}
body {
    background:grey;
}
</style>

如何将导航栏置于不同的屏幕尺寸中心

2 个答案: