Задать вопрос
@RushV
css

Как выстроить список li на два блока при разрешение экрана 1024?

Как реализовать выстраивание списка на два блока или столбика с помощь css?

<div class="menu-service">
  <ul class="list-group-service">
    <li class="list-group-item icon-security-system"></li>
    <li class="list-group-item icon-cctv"></li>
    <li class="list-group-item icon-electric-shock"></li>
    <li class="list-group-item icon-fire-extinguisher"></li>
    <li class="list-group-item icon-fire-alarm"></li>
    <li class="list-group-item icon-alarm"></li>
    <li class="list-group-item icon-fire-alarm"></li>
    <li class="list-group-item icon-settings"></li>
  </ul>
</div>
  • Вопрос задан
  • 136 просмотров
Комментировать
Подписаться 1 Средний Комментировать
Решения вопроса 2
0xD34F
@0xD34F Куратор тега CSS 
@media (max-width: 1024px) {
  .list-group-service {
    columns: 2;
  }
}
Ответ написан
1 комментарий
1 комментарий
@nvdfxx
Senior Pomidor developer 
@media (max-width: 1024px) {
  .list-group-service{
     column-count: 2
  }
}
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 1
http404ntfnd
@http404ntfnd
junior front-end developer
Можно так
@media (max-width: 1024px) {
  .list-group-service{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 100px;
  }
}


Значение высоты подберите сами
Ответ написан
3 комментария
3 комментария
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Frontend React
Glob-com
от 100 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Создать дудл - видео с AI аватаром
25 апр. 2024, в 10:25
2000 руб./за проект
Настроить на Asterisk общение с ботом в живом времени
25 апр. 2024, в 09:55
1000 руб./за проект
Доработать дизайн лендинга
25 апр. 2024, в 09:29
2500 руб./за проект
Ещё заказы