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

我笨拙地绊倒了答案。我只需要包括一个浮子：左;此外，突然间一切都排好了。

我还将宽度设置为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;   
}

如何在@media查询上移动导航？

1 个答案: