Question

我想要一个topbar导航，类似于你在Foundation中看到的导航。我遇到的问题是我为页面设置了边距而不知道如何覆盖它们？

因此对于大部分页面（正文）我需要这些边距，但对于顶部栏我喜欢它扩展浏览器的整个宽度。

以下是代码：

body {
font-family: 'Droid Sans', sans-serif;
font-size: 1.2em;
color: #000000;
background-color: white;
margin: 0em 6.5em 3.5em;

#nav ul {

width: 100%;
background-color: #212121;
font-size: 12px;
font-weight: bold;
color: white;
text-align: left;
display: block;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
}
#nav ul li {
  display: inline-block;
  margin-right: -4px;
  height: inherit;
  margin-left: 20px;
  position: relative;
  padding: 15px 20px;
  background: #212121;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
#nav ul li:hover {
 background: #212121;
  color: #fff;
}
#nav ul li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
 #nav ul li ul li { 
   background: #212121; 
  display: block; 
  color: #fff;
}
 #nav ul li ul li:hover { background: #212121; }
#nav ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

HTML：

    <body>
  <div id="nav">
  <ul>
  <li>Home</li>
  <li>Venue</li>
  <li>Events</li>
  <li>Stalls
    <ul>
      <li>Food</li>
      <li>Arts & Crafts</li>
    </ul>
  </li>
  <li>Contact</li>
</ul>
</div>

Answer 1

除了使用绝对定位之外，你可以像这样使用#nav的负边距：

#nav {
  margin-left:-6.5em;
  margin-right:-6.5em;
}

Demo

Answer 2

使用fixed定位页面顶部所需的导航栏。

#nav {
    min-width:100%;
    position:fixed;
    top:0;
    left:0;
}

添加100％的min-width应确保导航栏在页面宽度上延伸。将top和left设置为零，与position:fixed一起，会将导航div固定在左上角。

Answer 3

为标题应用以下css，

#nav{
position:absolute;
left:0;
right:0;
}

将导航器从正常流动中拉出并从左向右拉伸。

选中此JSFiddle

如果设置position:fixed; width:100%;，则标题将从正常流程中取出，并将相对于窗口定位。即使用户向下滚动页面，它也会保持原样。

将顶部导航栏扩展到页面的整个宽度

3 个答案: