css отзывчивый макет - как избежать одного элемента во втором ряду? - PullRequest
Новая
       7

css отзывчивый макет - как избежать одного элемента во втором ряду?

0 голосов
/ 01 февраля 2019

У меня есть этот код CSS для адаптивного меню: 

.portfolio-menu {
   display:inline-flex;      
   width:100%;
   justify-content: center;
   flex-wrap:wrap;
   background:grey;
   margin:0 auto;
   padding:0;
   padding-right:10%;
}

.portfolio-menu li {
  display:inline-block;
  margin-left:30px;
}

, когда я в некоторых случаях перемещаюсь в окне браузера, во втором ряду остается только один элемент.Я хотел бы оставить как минимум два предмета во втором ряду.Как мне это сделать?

Например:

НЕПРАВИЛЬНО:

• пункт 1 • пункт 2 • пункт 3 • пункт 4 • пункт 5

• элемент 6 <- отдельный элемент </p>

ПРАВИЛЬНО:

• элемент 1 • элемент 2 • элемент 3 • элемент 4

• пункт 5 • пункт 6 <- здесь как минимум два элемента </p>

1 Ответ

0 голосов
/ 01 февраля 2019

HTML-код 

<ul class="portfolio-menu">
    <li><a>link</a></li>
    <li><a>link</a></li>
    <li><a>link</a></li>
    <li><a>link</a></li>
    <li><a>link</a></li>
    <li><a>link</a></li>
</ul>

CSS-код необходимо ширина: 25% на li тег 

 *{
    box-sizing:border-box;
  }
    .portfolio-menu {
   display:flex;
   width:100%;
   justify-content: center;
   flex-wrap:wrap;
   background:grey;
   margin:0 auto;
   padding:0;
   padding-right:10%;
}

.portfolio-menu li {
  display:inline-block;
  width:25%;
  padding:15px;
}
.portfolio-menu li a{
    background:red;
    padding:20%;
    display:block;
}
...