Question

在平板电脑视图中，我正在尝试将导航栏徽标从导航栏的末尾更改为导航栏的开头，以便将徽标img显示在屏幕顶部

这就是我要编写的代码。我尝试对商品使用flex和order，但似乎无法使其正常工作

@media (max-width: 1050px) {
  .navbar {
    border: 1px solid red;
    display: flex;
    flex-direction: row;
  }
  .navbar a:first-child {
    order: 5;
  }
}

<div class="navbar">
  <a href="services.html">Services</a>
  <a href="#">Product</a>
  <a href="#">Vision</a>
  <a href="#">Features</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
  <a href="index.html"> <img class="logo" src="img/logo.png" alt="Great Idea! Company logo."></a>
</div>

什么都不会发生，如果有人可以帮助我并向我解释我做错了那太好了

Answer 1

从order is 0 by default开始，我们应该将其更改为小于0的值，例如=char(CODE(A1)+1)。

此外，您在问题中说，您需要将最后一个孩子移到最前面，因此您应该使用-1，而不是:last-child。

:first-child

@media (max-width: 1050px) {
  .navbar {
    border: 1px solid red;
    display: flex;
    flex-direction: row;
  }
  .navbar a:last-child {
    order: -1;
  }
}

如何将最后一个孩子移到第一个孩子前面

1 个答案: