Расположение тегов Nav Tag - PullRequest
Новая
       4

Расположение тегов Nav Tag

0 голосов
/ 26 ноября 2018

У меня есть этот навигационный тег на моем веб-сайте. Я хочу разделить его на две части, когда ширина устройства достигла указанного пикселя в медиазапросах CSS3. 

@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>

Как сделать так, чтобы во внешнем интерфейсе он выглядел как две строки навигационной ссылки.Спасибо!

Ответы [ 2 ]

0 голосов
/ 26 ноября 2018

Вот код 

* {
  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>
0 голосов
/ 26 ноября 2018

Это то, что вы искали?Из твоего вопроса это то, что я понял. 

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>
...