如何从中心(或其他有效的备选方案)扩展选择器的宽度？

Question

我有一个导航条(#nav_bar)，它具有以下CSS属性：

#nav_bar {
    background: url(../images/navbar.png) repeat-x;
    width: 100%; height: 50px;
    margin-bottom: 20px;
}

它采用#wrap的宽度，它是1024px wide，有margin: auto;，但是我想扩展它，使它适合所有屏幕大小的100%。我试图设置width: 500%;只是为了看看它会做什么，然后我意识到它是从左->向右扩展的，而不是从中间两个方向展开的。

所以，我想问的是；

是否有可能从中心展开一个元素，然后也许我可以设置max-width属性或使用javascript来查找访问者屏幕分辨率，然后从那里分配宽度；而不是主要的低效率，即延长加载时间/跨浏览器兼容性问题？

仅供参考，我所指的特定页面的链接

任何答案都将不胜感激;)！

Answer 1

只需将#nav_bar从#wrap中移出即可。

或者，您可以在CSS中使您的#nav_bar具有position: absolute; left: 0px; width: 100%;，这也是可行的。

Answer 2

为什么不使用CSS3媒体查询，以了解您的客户的屏幕大小。

如果您的#nav-bar是块级元素，如div、ul或p元素，那么默认情况下它将占用容器的整个宽度。因此，您不需要在那里设置width: 100%;。此外，您还可以使用text-align: center;对齐内容。

在您的情况下，您可以使用绝对定位和溢出:可见属性，并设置菜单的宽度。另外，您可以简单地将#nav-bar从包装中提取出来，让它占用整个空间。

Answer 3

使用margin: auto

您可以在这里看到一个例子：http://jsfiddle.net/s995c/4/