0

*, *:before, *:after {
    box-sizing: border-box;
}

a{
    text-decoration: none;
}

ul{
    list-style: none;
}

/*Menu*/
.nav{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 35px;
    position: relative;  
}

.menu{
    min-width: 1580px;
    background-color: #4ccfc1;
    padding: 0 120px 0 100px;
}

.menu ul{
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
}

.menu ul li{
    color: #fff;
    font-size: 1.2em;
    border-right: 2px solid #fff;
    display: inline-block;
    float: left;
    padding: 0 30px;
    font-family: 'Bebas Neue';
    text-transform: uppercase;
    font-weight: 100;
}


.menu ul a:last-child li{
    border:none
}


/*end Menu*/
<!--- Menu --->
       <div class="nav">
        <div class="menu">
            <ul>
                <a href=""><li>Home</li></a>
                <a href=""><li>Sale</li></a>
                <a href=""><li>Handbags</li></a>
                <a href=""><li>Wallets</li></a>
                <a href=""><li>Accessories</li></a>
                <a href=""><li>Mens Store</li></a>
                <a href=""><li>Shotes</li></a>
                <a href=""><li>Vintage</li></a>
                <a href=""><li>Services</li></a>
                <a href=""><li>Contact us</li></a>
            </ul>
        </div>
    </div>
<!--- end menu ---->

Хочу адаптировать меню таким образом, что бы когда экран уменьшался, пункты меню перескакивали на новую строку. Но не знаю как это сделать. введите сюда описание изображения

Вот так это должно выглядеть при адаптации.

2
  • Что используете ? flex-box или что то еще ? 20 окт 2017 в 18:40
  • @RuslanSemenov Да верстал на флексах
    – BraFik
    20 окт 2017 в 18:42

1 ответ 1

1

    ul{
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
    }
    li{
      padding: .5rem 1rem;
      border-right: 1px solid black;
    }
    li:last-child{
      border: none;
    }
<ul>
  <li>lorem 1</li>
  <li>lorem 2</li>
  <li>lorem 3</li>
  <li>lorem 4</li>
  <li>lorem 5</li>
  <li>lorem 6</li>
  <li>lorem 7</li>
  <li>lorem 8</li>
  <li>lorem 9</li>
  <li>lorem 10</li>
</ul>

10
  • Логика думаю понятна, а стилизацию подтяните. 20 окт 2017 в 18:46
  • Semenov можете подсказать что именно нужно указать в media запрос, просто только учусь адаптации
    – BraFik
    20 окт 2017 в 18:47
  • Ничего, как я написал уже адаптивно из-за flex-box, проверьте выполнив данный код. 20 окт 2017 в 18:49
  • Semenov Так я попробовал сделать так же как вы, но почему-то не чего не изменилось? С чем это может быть связано?
    – BraFik
    20 окт 2017 в 18:53
  • Этот код работает, покажите свой найдем ошибку. 20 окт 2017 в 18:54

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.