2015-06-10 53 views
0

對不起,我只是一個新手設計師。我想問一些問題,如何讓背景顏色移動到頂部?它仍然空白(背景顏色的頂部)拆分[CSS]如何讓它移動到頂部?

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <style> 
 
\t \t \t body{ 
 
\t \t \t \t margin: 0px; 
 
\t \t \t \t padding: 0px; 
 
\t \t \t } 
 
\t \t \t #navbar{ 
 
\t \t \t \t position: relative; 
 
\t \t \t \t background: #004f6b; 
 
\t \t \t \t height: 100px; 
 
\t \t \t \t color: white; 
 
\t \t \t } 
 
\t \t \t li{ 
 
\t \t \t \t list-style-type:none; 
 
\t \t \t \t display:inline; 
 
\t \t \t } 
 
\t \t \t #navbar > ul > li#title{ 
 
\t \t \t position: absolute; 
 
\t \t \t left: 5px; 
 
\t \t \t } 
 
\t \t \t #navbar > ul > li#homeicon{ 
 
\t \t \t position: absolute; 
 
\t \t \t left: 610px; 
 
\t \t \t } 
 
\t \t \t #navbar > ul > li#search{ 
 
\t \t \t position: absolute; 
 
\t \t \t right: 300px; 
 
\t \t \t } 
 
\t \t \t #navbar > ul > li#profile{ 
 
\t \t \t position: absolute; 
 
\t \t \t right: 5px; 
 
\t \t \t } 
 
\t \t </style> 
 
\t </head> 
 
\t <body> 
 
\t \t <div id="navbar"> 
 
\t \t \t <ul> 
 
\t \t \t \t <li id="title">Title</li> 
 
\t \t \t \t <li id="homeicon">Icon</li> 
 
\t \t \t \t <li id="search"><input type="text" style="width:210%"/></li> 
 
\t \t \t \t <li id="profile">Follow Us!</li> 
 
\t \t \t </ul> 
 
\t \t </div> 
 
\t </body> 
 
</html>

截圖:http://i58.tinypic.com/rhr8xt.png 對不起我的英文不好和我不錯的技能對不起......感謝您的幫助。 ..

回答

1

ul元素有一個默認的margin,它將所有內容向下推。您只需在ul上指定margin: 0;即可解決此問題。

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <style> 
 
\t \t \t body{ 
 
\t \t \t \t margin: 0px; 
 
\t \t \t \t padding: 0px; 
 
\t \t \t } 
 
\t \t \t #navbar{ 
 
\t \t \t \t position: relative; 
 
\t \t \t \t background: #004f6b; 
 
\t \t \t \t height: 100px; 
 
\t \t \t \t color: white; 
 
\t \t \t } 
 
\t \t \t li{ 
 
\t \t \t \t list-style-type:none; 
 
\t \t \t \t display:inline; 
 
\t \t \t } 
 
         #navbar > ul { 
 
           margin: 0; 
 
         } 
 
\t \t \t #navbar > ul > li#title{ 
 
\t \t \t position: absolute; 
 
\t \t \t left: 5px; 
 
\t \t \t } 
 
\t \t \t #navbar > ul > li#homeicon{ 
 
\t \t \t position: absolute; 
 
\t \t \t left: 610px; 
 
\t \t \t } 
 
\t \t \t #navbar > ul > li#search{ 
 
\t \t \t position: absolute; 
 
\t \t \t right: 300px; 
 
\t \t \t } 
 
\t \t \t #navbar > ul > li#profile{ 
 
\t \t \t position: absolute; 
 
\t \t \t right: 5px; 
 
\t \t \t } 
 
\t \t </style> 
 
\t </head> 
 
\t <body> 
 
\t \t <div id="navbar"> 
 
\t \t \t <ul> 
 
\t \t \t \t <li id="title">Title</li> 
 
\t \t \t \t <li id="homeicon">Icon</li> 
 
\t \t \t \t <li id="search"><input type="text" style="width:210%"/></li> 
 
\t \t \t \t <li id="profile">Follow Us!</li> 
 
\t \t \t </ul> 
 
\t \t </div> 
 
\t </body> 
 
</html>

+0

先生感謝您的幫助最好的practice.as,所以我只是用保證金的UL移動到頂部,設置爲0 ? –

+0

是的,如果你在我的答案中查看更新的代碼片段,你應該看看我做了什麼,以及它的結果。 –

0

其更好地在*聲明一個CSS使用

* 
{ 
padding:0px; 
margin:0px; 
} 

這意味着所有的預定義的填充和保證金將從每一個HTML元素被移除。

這是很難搞清楚填充/保證金的每一個元素

相關問題