Как переместить навигацию по запросу @media?

Question

У меня есть моя навигация влево для просмотра рабочего стола. Я думаю, что я хочу, чтобы переместить его в верхней части экрана для небольших устройств ...

сейчас это выглядит следующим образом:

LO 
GO 
__ 
__ 
__ 

Я хотел бы, чтобы выглядеть при просмотре на маленьком браузере :

LO -- -- 
GO -- -- 

Нормальный просмотр CSS является:

#nav { 
width: 130px; 
padding: 10px 10px 150px; 
} 

.nav-links { 
list-style: none; 
margin: 0; 
} 

Я попытался:

@media all and (max-width: 480px) { 
    #nav { 
    width: 25ems; 
    height: 7ems; 
    position: absolute; 
    top: 0; 
} 

    .nav-link a, .nav-link span.link-placeholder { 
    font-size: 10px; 
    padding: 0 10px; 
    line-height: 30px; 
    top: 0; 
} 

Но он не сдвинется с места ... кто-нибудь знает, что я делаю неправильно?

Answer 1

Я пошарил, чтобы наткнуться на ответ. Я просто должен был включить float: left; добавление и вдруг все выстроились.

Я также установил ширину до 40%, чтобы дать место для ссылок и логотипа. вот окончательный CSS:

@media all and (max-width: 480px) { 
    #nav { 
    height: 150px; 
    position: fixed; 
    width:100%; 
    top: 0; 
} 

.nav-links { 
    position: absolute; 
    top: 10px; 
    left: 147px; 
} 

.nav-link { 
    display:inline; 
    padding: 0 10px 0 0; 
    float:left; 
    width:40%; 
    height:auto; 
    font-size: 8.85px; 
}