導航欄將不會完全覆蓋屏幕

我已經盡力搜索周圍，但我似乎無法找到答案，可能是我沒有使用正確的關鍵字。導航欄將不會完全覆蓋屏幕

無論如何，我做了一個簡單的導航欄，並把它放到100％的寬度，但它不會覆蓋屏幕最右側的部分。我嘗試使用正確的：-5px;但它沒有幫助。

這裏是jsfiddle，所以你可以看到我的代碼。

CSS：

#nav { 
width: 100%; 
float: left; 
margin: 0 0 0 0; 
padding: 0; 
background-color: #F3B33C; 
border-bottom: 4px solid #ccc; 
position: absolute; 
top: -1px; 
left: -5px; 
margin-right: -5px; 
}

HTML

<div id="nav"> 
    <ul> 
    <li><a id="home" href="index.html"> <img src="images/black home.png" width="28" height="28"></a></li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Forum</a></li> 
    <li><a href="#">Database</a></li> 
    </ul> 
    </div>

來源

2013-04-11 user2168765

您正在通過'5px的離開了酒吧除去導航元素的保證金右側和左側的屬性和定身'，因此在右側創建了一個5px的空白。什麼是「left：-5px」？ – andyb 2013-04-11 13:51:08

正如我告訴裁縫，如果我刪除左側5像素，左側出現同樣的問題。 – user2168765 2013-04-11 13:53:04

這是由於''上的瀏覽器默認邊距造成的。將其設置爲'margin：0'並完全移除所有負面定位。（也是我在你的答案評論前寫下了我的評論！） – andyb 2013-04-11 13:54:05

所有你不需要浮動首先，當您使用position: absolute;

二來你的導航，首先你需要重新設置瀏覽器默認樣式表，你可以簡單地使用這個

* { 
    margin: 0; 
    padding: 0; 
}

後來從#nav改變left: -5px;到left: 0;，你是好去

Demo

來源

2013-04-11 13:51:37

謝謝！它修復了它，也感謝信息。我在這方面還很新。 – user2168765 2013-04-11 13:55:34

@ user2168765歡迎您:) – 2013-04-11 13:57:27

當然，您是我看到的第一個解決它的人。我猜這個錯誤是由我使用'position：absolute;'和float兩個引起的？ – user2168765 2013-04-11 14:00:12

刪除left: -5px; ，然後再試一次

來源

2013-04-11 13:51:21

如果我刪除'left-5px;'我在左邊得到同樣的問題。 – user2168765 2013-04-11 13:52:30

只需卸下left: -5px你#nav http://jsfiddle.net/xBkma/4/

來源

2013-04-11 13:51:58 davids

加入試試這個代碼，而不是：

body{ 
    padding:0px; 
    margin:0px; 
} 
#nav { 
    width: 100%; 
    float: left; 
    margin: 0 0 0 0; 
    padding: 0; 
    background-color: #F3B33C; 
    border-bottom: 4px solid #ccc; 
    position: absolute; 
    }

大多數瀏覽器似乎有一些對身體填充和利潤率所以其設置爲0

來源

2013-04-11 13:52:30 Andrew

謝謝！它修復了它。 – user2168765 2013-04-11 13:54:46

很高興幫助。一些瀏覽器喜歡爲身體或其他物品提供一些隱藏的填充和邊距。最好是通過刪除填充和邊距來啓動您的CSS重置 – Andrew 2013-04-11 14:00:36

您需要添加框尺寸：border-box;

像這樣

#nav { 
width: 100%; 
box-sizing: border-box; 
float: left; 
margin: 0 0 0 0; 
padding: 0; 
background-color: #F3B33C; 
border-bottom: 4px solid #ccc; 
position: absolute; 
top: -1px; 
left: -5px; 
margin-right: -5px; 
}

還添加body{padding: 0; margin: 0;}

工作撥弄http://jsfiddle.net/xBkma/8/

來源

2013-04-11 13:53:58

刪除

位置：絕對

導航上的

。位置和浮動相互矛盾。

http://jsfiddle.net/xBkma/6/

html, body { 
    padding: 0; 
    margin: 0; 
} 

#nav { 
    width: 100%; 
    float: left; 
    margin: 0 0 0 0; 
    padding: 0; 
    background-color: #F3B33C; 
    border-bottom: 4px solid #ccc; 
}

來源

2013-04-11 13:54:03

你應該嘗試用保證金0

body{ 
margin: 0; 
}

來源

2013-04-11 13:54:59

導航欄將不會完全覆蓋屏幕

回答

相關問題