为什么导航栏不会伸展到100％宽度？

时间：2015-04-09 07:30:56

标签： html css

我是html风格的新手，我想制作一个像这个网站（stackoverflow.com）的顶级导航栏，它将是100％宽度并位于浏览器之上。这是我试过的：

<style>
body{text-align:center;}

.wrapper{width:80%;margin:0 auto;text-align:left;}

.navbar-default {
  background-color: #497093;
    border-color: #3e5f7d;
}
#nav-bar{
    width:100% !important; <-- here I make the nav-bar 100% width.
    float:left;
}
</style>

但它仍将固定为80％宽度： - （

我该如何使这项工作？ enter image description here

以下是html的片段

<body class="wrapper">
    <div class="navbar navbar-default navbar-static-top" role="navigation" id="nav-bar"> 
    </div>
...
...
</body>

1 个答案:

答案 0 :(得分：3)

只是看着图像就像我的评论所说的那样。您的nav内有wrapper。将它移到外面，它将是窗口宽度的100％。

它是父母（wrapper）的100％，而父母的宽度为80％。

修改

在你的情况下，你有一个关于身体的类，所以任何子元素将从80％宽度缩放。我建议将内容包装在div中并将nav移到该包装器之外。 

body {
  margin: 0;
}
.nav {
  background: red;
}
.wrapper {
  width: 80%;
  margin: 0 auto;
  background: #999;
}
<div class="nav">We can go 100%!</div>
<div class="wrapper">
  Content Here
</div>

相关问题
最新问题