爲什麼我的導航欄不能顯示整個網站的寬度？

CSS上的容器寬度爲100％，但在頁面結束之前停止了一點。爲什麼我的導航欄不能顯示整個網站的寬度？

HTML使用

<div id="nav-container"> 
        <ul id ="nav-list"> 
         <li id=nav-title>lymbo</li> 
         <li><a href="#">Playmaps</a></li> 
         <li><a href="../map.html">Map</a></li> 
         <li><a href="../about.html">About</a></li> 
         <li><a href="#">My Account</a></li> 
         <li><a href="#">Log Out</a></li> 
        </ul> 
</div>

CSS使用

#nav-container { 
     width: 100%; 
     height: 50px; 
     position: fixed; 
     top: 0; 
     float: top; 
     padding-top: 15px; 
     text-align: left; 
     -webkit-box-shadow: 0px 0px 8px 0px #000000; 
     -moz-box-shadow: 0px 0px 8px 0px #000000; 
     box-shadow: 0px 0px 8px 0px #000000; 
     background-color: rgba(0, 70, 12, 0.5); 
     border-bottom: 1px solid #ccc; 
     border-top: 1px solid #ccc; 
}

此外，如果任何人有，爲什麼我的頭將與我的導航欄的干擾，我想聽聽你輸入的任何想法。我希望我的導航欄像Twitter導航欄那樣有一點「漸變」，但我用的教程接近但沒有骰子。

來源

2013-05-29 Ronald Din

如果你上傳一個scren或者發佈一個鏈接到它的演示文件，它更容易分析......另外，'top'不是'float'的實際值。我們需要看到更多的html和css – CoreyRS

綠色正在填充整個寬度然後是什麼問題 – Sowmya

'float：top;'：O CSS5？ –

由於我看不到JSFiddle，我無法測試它。

但我認爲div已經在頁面的整個寬度上。這可能是該頁面尚未完成的列表。把寬度：100％在裏面，看看會發生什麼。

來源

2013-05-29 13:44:38

嘗試將left: 0;添加到您的CSS。正如其他人所提到的，您不需要float屬性。

來源

2013-05-29 13:47:35 surfitscrollit

在＃NAV-容器中，加入保證金和頭寸控制，就像這樣：

#nav-container { 
    margin:0px auto; 
    left:0px; 
    right:0px; 
}

而且，由於您使用的是單爲您導航，您應該添加CSS來控制保證金的名單，像這樣：

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

list-style-type:none;將刪除列表中的項目符號點（如果優選）。

最後，對於一些瀏覽器可能是明智的，在<body>標籤頁邊距設置爲零，這樣的：

<body leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0" marginheight="0" marginwidth="0">

來源

2013-05-29 15:50:51 dan

我敢打賭，你nav-container是具有另一個DIV（container-fluid）內一個padding-left適用於它。

來源

2013-06-11 23:36:02

默認元素周圍有一些空間。這就是爲什麼使用重置樣式很常見的原因。將它添加到主樣式表的開頭，因爲這是一個很好的練習。

* { 
    margin: 0; 
    padding: 0; 
}

來源

2013-06-11 23:42:28

爲什麼我的導航欄不能顯示整個網站的寬度？

回答

相關問題