css - 如何在@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%，以便为链接和 Logo 留出空间。这是最终的 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;   
}