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>

Answer 2

这是您要找的东西吗？从您的问题来看，这就是我的理解。

div {
  display: inline;
}

@media only screen and (max-width: 900px) {
  div {
    display: block;
  }
}

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

导航标签显示布局

2 个答案: