CSS位置绝对和全角问题

Question

我有 2 个 div 和一个 dl：

 <div id="wrap">
 <div id="header">
  <dl id="site_nav_global_primary">

这是我的风格：

 #wrap {
    margin:0 auto;
    width:100%;
    min-width:760px;
    max-width:1003px;
    overflow:hidden;
}

#header {
    width:100%;
    position:relative;
    float:left;
    padding-top:18px;
    margin-bottom:29px;
}

#site_nav_global_primary {
    float:right;
    margin-right:18px;
    margin-bottom:11px;
    margin-left:18px;
}

现在我想更改 site_nav_global_primary 以具有全屏宽度而不更改包装和标题。但是当我尝试时：

 #site_nav_global_primary {
    position: absolute;
    width:100%;
    top:0px;
    left:0px;
}

导航获取包装器的 100%，最大宽度为 1003 像素。我希望它在不更改 wrap 和 header div 的情况下拉伸到最大。

这可能吗？

原文由 Tom 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以将 left 和 right 属性设置为 0 。这将使 div 拉伸到文档宽度，但要求没有定位父元素（事实并非如此，看到 #header 是 position: relative; ）

 #site_nav_global_primary {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

演示地址：http: //jsfiddle.net/xWnq2/ ，我从中删除了 position:relative; 从 #header

原文由 xec 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您需要将 position:relative 添加到 #wrap 元素。

当你添加这个时，所有的子元素都将定位在这个元素中，而不是浏览器窗口中。

原文由 Andrzej Ośmiałowski 发布，翻译遵循 CC BY-SA 3.0 许可协议