跨页面包装器的 100% 宽度导航答案

【问题标题】：100% width nav across page wrapper跨页面包装器的 100% 宽度导航
【发布时间】：2012-07-12 10:25:11
【问题描述】：

我在站点包装器中有一个导航，

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

包装器的定义宽度为 960px + margin: 0 auto。我希望导航在整个 100% 的正文宽度上延伸，跨越包装器的 960 像素，而不修改标记。

有什么想法吗？

【问题讨论】：

【解决方案1】：

导航元素默认是内联显示的，这就是为什么：

CSS：

nav {
   display: block;
}

编辑在你澄清你的问题后：http://jsfiddle.net/meo/TBqrA/2/你可以使用绝对位置...

绝对定位元素相对于下一个元素定位，即相对位置、固定位置或绝对位置（或简称为主体）。只要确保你的包装是 position: static...

【讨论】：

好吧，也许是个误会。假设正文宽度：2000px，包装宽度：960px。内容在包装器中，导航也在包装器中，但应该延伸到整个 2000 像素（不将导航器从包装器中取出）。
啊哈！ :P 那么唯一的方法是使用绝对位置或固定位置。或者把它放在你的包装器外面......除非你想用 JS 做一些事情......（ps你不想要那个：P）