html - 导航标签显示布局

Question

我的网站有这个导航标签我想在设备宽度达到 CSS3 媒体查询中指定的 px 时将其分成两部分。

@media only screen and (max-width: 900px) {
  .nav-links>a {
    float:left;
    width:50%;
  }
}

<nav class="nav-links">
    <a href="#">Home</a>
    <a href="#">Blog</a>
    <a href="#">Contact</a>
    <a href="#">Other</a>
    <a href="#">Other</a>
    <a href="#">Other</a>
    <a href="#">Other</a>
</nav>

我怎样才能让它在前端看起来像两行导航链接。谢谢!

Answer 1

这是代码

* {
  box-sizing: border-box;
}
.nav-links {
  margin: 10px;
}
.nav-links a {
  display: inline-block;
  padding: 7px;
  background: #333;
  color: #fff;
  border-radius: 5px;
  text-decoration: none;
  margin: 5px 0;
}
@media only screen and (max-width: 767px) {
  .nav-links a {
    width: 49%;
  }
}

<nav class="nav-links">
    <a href="#">Home</a>
    <a href="#">Blog</a>
    <a href="#">Contact</a>
    <a href="#">Other</a>
    <a href="#">Other</a>
    <a href="#">Other</a>
    <a href="#">Other</a>
</nav>