html - 使嵌套 div 的宽度填充到浏览器

Question

其实这是我在开发blogger的过程中遇到的问题。

我想自己写一个导航栏，但是父元素的宽度限制了样式width:100%，即使我给它设置了float属性。

请看上图。只有 nav 的 HTML/JS/CSS 是可配置的。那么如何配置 nav 类的 CSS 样式来实现这个目标呢？

或者，如果您有开发博客的相关经验，请告诉我。

非常感谢!

Answer 1

为您的导航使用绝对位置。 Look at this FIDDLE

HTML :

<div class="first">0</div>
<div>
    1
    <div class="nav">NAV</div>
</div>
<div>2</div>

样式:

div { background: grey; width: 75px; height: 50px; margin: 20px auto; }
.first { margin-top: 75px; }
.nav { background: red; position: absolute; top: 10px; left: 0px; width: 100%; margin: 0; }

编辑

您的导航位于 position:relative; 您可以使用 jquery ( HERE THE FIDDLE UPDATED ) 将您的导航附加到您的正文中:

$(".nav").appendTo("body");