Пункт абзаца ниже под навигационной панелью

Question

В настоящее время я пишу веб-сайт с нуля, и у меня возникают проблемы с моим css и html. Я не уверен, как создать пространство между моей навигационной панелью и моим контентом. Вот мой HTML:

http://pastebin.com/cTVCx0gm

и мой CSS:

http://pastebin.com/w61aTmHv

Так как я начинающий программист, я не совсем уверен, что я делаю неправильно .. .

Спасибо!

Answer 1

Все, что вам нужно сделать, это изменить свой класс "Ли" на это:

li 
{ 
display:inline-block; 
} 

Я создал эту скрипку здесь, так что вы можете см. выход. Вы можете перемещать центральную панель влево и вправо, чтобы увидеть поведение.

http://jsfiddle.net/ninja1/ALKPP/

Answer 2

попробовать это

Demo

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
} 
li { 
    display: inline; 
    float: left; 
} 
a { 
    display: block; 
    width: 150px; 
    height: 30px; 
    background-color: #024c68; 
    text-align: center; 
    padding: 10px; 
    font-size: 20px; 
    display: inline; 
} 
a:link { 
    color: #ffffff; 
    text-decoration: none; 
    font-family: verdana; 
} /* unvisited link */ 
a:visited { 
    color: #ffffff; 
    text-decoration: none; 
    font-family: verdana; 
} /* visited link */ 
a:hover { 
    color: #ffffff; 
    text-decoration: none; 
    font-family: verdana; 
    background: #226078; 
} /* mouse over link */ 
a:active { 
    text-decoration: underline; 
    text-decoration: none; 
    font-family: verdana; 
} /* selected link */ 
/*this is the body css*/ 
body { 
    background-color: #62b1d0; 
} 
div.box { 
    background-color: #99CCFF; 
    border: 5px solid #99CCFF; 
    clear: left; 
    margin: 9px 0 0 0; 
    padding: 8px 10px; 
    width: 900px; 
} 
.clrboth { 
    clear: both; 
}