如何使navbar全寬

我想讓我的導航欄延伸到瀏覽器的邊緣。我可以通過指定像素寬度來實現，但是當我使寬度=「100％」時它不工作+它顯示底部的滾動條.....所以我怎樣才能讓它延伸到窗口大小的瀏覽器水平？如何使navbar全寬

這裏是Demo

<html> 
<head> 

<style type="text/css"> 


body { 
    margin-left: 0px; 
    margin-top: 0px; 
    margin-right: 0px; 
    margin-bottom: 0px; 
} 
#nav { 
    float: left; 
    font: bold 12px Arial, Helvetica, Sans-serif; 
    border: 1px solid #121314; 
    border-top: 1px solid #2b2e30; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 0px; 
    overflow: hidden; 
    width:100%; 

} 

#nav ul { 
    margin:0; 
    padding:0; 
    list-style:none; 
} 

#nav ul li { 
    float:left; 
} 

#nav ul li a { 
    float: left; 
    color:#d4d4d4; 
    padding: 15px 97px; 
    text-decoration:none; 
    background:#3C4042; 
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77))); 
    background: -moz-linear-gradient(center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78%); 
    background: -o-linear-gradient(center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78%); 
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset; 
    border-left: 1px solid rgba(255, 255, 255, 0.05); 
    border-right: 1px solid rgba(0,0,0,0.2); 
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6); 
} 




#nav ul li a:hover, 
#nav ul li:hover > a { 
    color: red; 
    background:#3C4042; 
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71))); 
    background: -moz-linear-gradient(center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78%); 
    background: -o-linear-gradient(center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78%); 
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000; 

} 

#nav li ul a:hover, 
#nav ul li li:hover > a { 
color: #2c2c2c; 
    background: #5C9ACD; 
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0.17, rgb(61,111,177)), color-stop(0.51, rgb(80,136,199)), color-stop(1, rgb(92,154,205))); 
    background: -moz-linear-gradient(center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100%); 
    background: -o-linear-gradient(center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100%); 
    border-bottom: 1px solid rgba(0,0,0,0.6); 
    border-top: 1px solid #7BAED9; 
    text-shadow: 0 1px rgba(255, 255, 255, 0.3); 
} 



#nav li:hover ul { 
    left: auto; 
} 




#nav li li:hover ul { 
    visibility:visible; 
} 


</style> 
</head> 
<body> 
<div id="nav" > 
<ul > 
<li width="300px" ><a href="#">Home</a></li> 
<li><a href="#">Sell</a> 

<li><a href="#">Services</a> 

<li><a href="#">Contact Us</a></li> 
<li><a href="#">Sign In/Register</a></li> 
</ul> 
</div>

來源

2013-01-14 Haymi

我試着去嘗試風格'ul li a'而不是'ul li'元素。正如上面提到的人給每個李元素的20％，風格與'盒大小：邊框'的一切，你準備好去;）在這裏你可以看到解決方案：http://codepen.io/czaras/pen/Auqtn

來源

2013-01-14 00:52:21 user1975169

非常好，但是我怎麼能在鼠標懸停時突出整個單元呢？ – Haymi

也在Firefox上登錄/註冊進入下一行，但它適用於Chrome瀏覽器和Safari瀏覽器...該CSS不顯示在IE 9上 – Haymi

寬度指定內容的寬度。填充和邊框尺寸被添加到指定的寬度。如果您希望包括邊框爲100％，則必須移除邊框。

見這個例子：

_______________________ 
| margin    | 
| ___________________ | 
| | border   | | 
| | _______________ | | 
| | | padding  | | | 
| | | ___________ | | | 
| | | | content | | | | 
| | | |___________| | | | 
| | | |   | | | | 
| | | |<- width ->| | | | 
| | |_______________| | | 
| |___________________| | 
|_______________________|

來源

2013-01-14 00:08:29 icktoofay

我刪除了邊框，並添加寬度：100％;在導航欄上，但得到相同的東西 – Haymi

刪除'＃nav'上的邊框爲我刪除滾動條。 – icktoofay

#nav是100％的寬度，但個別按鈕不佔用你想，因爲他們符合其文本（width:auto）的寬度的空間。獲得您要查找的效果（對於任意數量的按鈕）的最簡單方法是使用寬度爲100％的table。一個更復雜的方法是給每個按鈕一個相等的百分比寬度，使得按鈕的數量增加到100％。你有5個按鈕，所以你可以把width:20%;放在#nav ul li。你也想要消除你在這種風格上的大97px左右填充，並選擇一個更小的值。

要處理底部的滾動條，請在#nav上指定box-sizing: border-box;。

來源

2013-01-14 00:09:27 Plynx

但是，如果您需要支持舊瀏覽器，請務必注意[哪些瀏覽器支持'box-sizing']（http://caniuse.com/css3-boxsizing）。 – icktoofay

我試圖讓nav li 20％，但它不起作用。 – Haymi

儘量避免使用表格進行佈局。沒有錯，但我相信時代已經改變。 http://shouldiusetablesforlayout.com/ – aug

如何使navbar全寬

回答

相關問題