為什么我的導航欄沒有占據網站的整個寬度？
[英]Why does my navigation bar not go the entire width of the website?
問題描述
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 導航欄一樣有一點“漸變”，但我使用的教程很接近但沒有骰子。
5 個解決方案
解決方案1
3 2013-05-29 15:50:51
在#nav-container 中，添加邊距和位置控制，如下所示：
#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">
解決方案2
1 2013-05-29 13:47:35
嘗試添加left: 0; 到您的 CSS。 同樣正如其他人所提到的，您不需要float屬性。
解決方案3
0 2013-05-29 13:44:38
由於我看不到 JSFiddle，我無法對其進行測試。
但我認為 div 已經在頁面的整個寬度上。 它可能是尚未 100% 出現在頁面上的列表。 在那里放一個 width:100% ，看看會發生什么。
解決方案4
0 2013-06-11 23:36:02
我敢打賭，您的nav-container位於另一個 div（ container-fluid ）內，該 div 應用了padding-left 。
解決方案5
0 2013-06-11 23:42:28
默認元素周圍有一些空間。 這就是為什么通常使用重置樣式的原因。 將此添加到主樣式表的開頭，因為這是一個很好的做法。
* {
margin: 0;
padding: 0;
}
為什么我的懸停命令沒有穿過整個欄？ 淺藍色應該穿過整個條形，而不是那么多
[英]Why isnt my hover command going across the entire bar? The light blue should go across the entire bar instead of just that much
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.