如何從中心（或其他高效替代品）擴展選擇器寬度？

Question

我有一個導航欄（#nav_bar），它具有以下CSS屬性：

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

它採用的#wrap其寬度爲1024px廣泛且具有margin: auto;，但是我想擴大它，以便它將適合所有屏幕尺寸100%。我試圖設置width: 500%;只是爲了看看它會做什麼，然後我意識到它從左向右擴展，而不是從中心向兩個方向擴展。

所以，我問的是;

是否有可能有一個元素從中心展開，然後 也許我可以設置max-width屬性或使用JavaScript來 找出訪問者的屏幕分辨率，然後從那裏 分配的寬度;沒有主要的低效率，即延長加載時間/跨瀏覽器兼容性問題？

Just for reference, a link to the particular page I'm talking about

任何答案，將不勝感激）！

Answer 1

只需將#nav_bar移出#wrap即可。

另外，你也可以讓你的#nav_bar在CSS中有position: absolute; left: 0px; width: 100%;，這也可以。

Answer 2

爲什麼不使用CSS3 Media Queries來了解客戶的屏幕尺寸。

如果#nav-bar是塊級元素，像div，一個ul或p元素，則它由缺省將採取其容器的整個寬度。因此你不需要在那裏設置width: 100%;。另外，您可以使用text-align: center;來對齊內容。

在你的情況，你可以使用絕對定位與溢出：可見屬性，並設置菜單的寬度。此外，你可以簡單地從包裝中提取你的#nav-bar，讓它佔據整個空間。

Answer 3

使用margin: auto

，你可以在這裏看到一個例子：。http://jsfiddle.net/s995c/4/