爲什麼文本不與頂部對齊？

我在我的頁面頂部有這個菜單欄，它沒有正確對齊。爲什麼文本不與頂部對齊？

鏈接意味着與條對齊，因此它們的高度相同。

HTML：

<html> 
<head> 
<title>DatNerd - Home</title> 
<!--External Javascripts--> 
<script src="externals/javascript/jquery-1.8.3.js"></script> 
<script src="externals/javascript/jquery-ui.js"></script> 
<script src="externals/javascript/jquery.cookie.js"></script> 
<script src="externals/javascript/animated-hover.js"></script> 
<script src="externals/javascript/javascript.js"></script> 
<script src="externals/javascript/mobdetect.js"></script> 
<!--External CSS--> 
<link rel="stylesheet" href="externals/css/main.css" /> 
<link rel="stylesheet" href="externals/css/jquery-ui.css" /></head> 
<body> 

<div id="toolbar"> 
<ul> 
<li><a href="#">Home</a></li> 
<li><a href="#">Contact</a></li> 
<li><a href="#">Stats</a></li> 
<li><a href="#">Projects</a></li> 
</ul> 
</div> 

</body> 
</html>

CSS：

#toolbar 
{ 
background: #b2b2b2; /* Old browsers */ 
background: -moz-linear-gradient(top, #b2b2b2 2%, #2b2b2b 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,#b2b2b2), color-stop(100%,#2b2b2b)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #b2b2b2 2%,#2b2b2b 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #b2b2b2 2%,#2b2b2b 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #b2b2b2 2%,#2b2b2b 100%); /* IE10+ */ 
background: linear-gradient(to bottom, #b2b2b2 2%,#2b2b2b 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b2b2b2', endColorstr='#2b2b2b',GradientType=0); /* IE6-9 */ 
width:100%; 
height:40px; 
position:fixed; 
top:0; 
left:0; 
line-height:40px; 
} 

#toolbar ul 
{ 
list-style-type:none; 
} 
#toolbar a 
{ 
float:left; 
width:100px; 
text-decoration:none; 
color:white; 
background-color:purple; 
height:100%; 
text-align:center; 
} 

#toolbar a:hover 
{ 
background-color:#ff3300; 
} 

#toolbar li { 
display:inline; 
}

來源

2012-12-29 Dan

您需要對UL的margin和padding設置爲0。您的瀏覽器（用戶代理）的默認樣式。對於ul，這包括邊距，填充，列表樣式等。您已經清除了列表樣式類型，但沒有其他。

#toolbar ul { 
    padding: 0; 
    margin: 0; 
}

在瀏覽器中點擊F12以啓動開發人員工具。在這裏，你可以檢查元素來定位違規的CSS。如果您使用的是FireFox，則可能需要安裝FireBug。其他主要瀏覽器預裝了開發工具。

來源

2012-12-29 12:51:43

感謝時，我什麼都試過，只是不能相信我忘了利潤。 -Facepalm – Dan

好吧，這真的會讓我失望，爲什麼現在頂部有一個1px的空白，懸停在鏈接上，你會看到它。 http://dans.comuv.com/ – Dan

#toolbar ul { 
    margin: 0; 
    padding: 0; 
}

通常，您可能會發現重置樣式表有幫助。

來源

2012-12-29 12:52:57 Jacob

試試這個：

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

來源

2012-12-29 12:54:01

你忘了填充。在Chrome中，有40像素左填充。 –

是的，謝謝@flem –

@flem - 我會給你兩個你+1 - bz你回答第一個 –

棒這在你的CSS，因爲它有助於阻止bulletpoints等..做一個UL李名單

ol, ul{list-style:none;}

來源

2012-12-29 13:20:16 Bob

爲什麼文本不與頂部對齊？

回答

相關問題