2015-06-10 2 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, которое толкает весь контент вниз. Вы можете просто указать margin: 0; на ul, чтобы решить эту проблему.

<!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

Благодаря сэру за вашу помощь, так что я просто должен переместить ул к вершине, используя маржу значение 0 ? –

+0

Да, если вы посмотрите на обновленный фрагмент кода в моем ответе, вы должны увидеть, где я это сделал, и его результат. –

0

Ее лучше использовать

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

объявляя КАС в * это означает, что все предопределенные обивка и запас будут удалены друг от друга и каждый HTML элемент.

, который является лучшим practice.as трудно выяснить, обивка/маржу для каждого элемента

Смежные вопросы