Как сверстать список тегов из двух строк с фиксированной высотой?

Question

Вот список тегов

                      <ul class="tags_list_2">
                        <li><a href="#" class="tag_2">Со скидкой</a></li>
                        <li><a href="#" class="tag_2">Для праздника</a></li>
                        <li><a href="#" class="tag_2">На свадьбу</a></li>
                        <li><a href="#" class="tag_2">Супер-скидка</a></li>
                        <li><a href="#" class="tag_2">Акции</a></li>
                        <li><a href="#" class="tag_2">Петарды</a></li>
                        <li><a href="#" class="tag_2">Батареи салютов</a></li>
                        <li><a href="#" class="tag_2">Летающие</a></li>
                        <li><a href="#" class="tag_2">Петарды</a></li>
                        <li><a href="#" class="tag_2">Для праздника</a></li>
                        <li><a href="#" class="tag_2">Летающие</a></li>
                        <li><a href="#" class="tag_2">Супер-скидка</a></li>
                        <li><a href="#" class="tag_2">Со скидкой</a></li>
                        <li><a href="#" class="tag_2">Батареи салютов</a></li>
                        <li><a href="#" class="tag_2">На свадьбу</a></li>
                        <li><a href="#" class="tag_2">Со скидкой</a></li>
                    </ul>

При адаптивность список должен быть фиксированной высоты. Пункты должны быть только в две строки. Приблизительно так

То есть список должен быть с горизонтальным скролом. Как это сделать?

Answer 1

С помощью только CSS решить задачу невозможно. Если только вручную не оборачивать первую и вторую половину элементов в отдельные контейнеры. Поэтому решение на javascript я увидел следующим:

//Узнаем общее количество элементов
const elements = document.getElementsByClassName('tag_2').length;
console.log('Общее количество элементов:', elements);

//Делим на два, получаем
const el2 = elements / 2
console.log('Разделили на два:', el2);

//Округляем до целого числа в большую сторону и получаем количество элементов в верхней строке
const split = Math.ceil(el2);
console.log('Округлили до целого числа:', split);

//Обернем элементы в отдельные два контейнера
const divs = document.querySelector('.container');
const items = [...document.querySelectorAll('.tags_list_2>li')];
const div1 = document.createElement('ul');
div1.classList.add('list');
divs.append(div1);
div1.append(...items.slice(0, split));
const div2 = document.createElement('ul');
div2.classList.add('list');
divs.append(div2);
div2.append(...items.slice(split, elements));

//Удаляем дефолтный элемент tags_list_2
document.querySelector(".tags_list_2").remove();

.container {
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
  height: 100px;
  overflow-x: auto;
}

.container ul {
  display: flex;
  align-items: flex-start;
  align-content: flex-start;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

.container li {
  white-space: nowrap;
  margin: 5px;
  padding: 5px 10px;
  background: #ddd;
  border-radius: 7px;
}

.container a {
  text-decoration: none;
  color: #333;
}

<div class="container">
  <ul class="tags_list_2">
    <li><a href="#" class="tag_2">Со скидкой</a></li>
    <li><a href="#" class="tag_2">Для праздника</a></li>
    <li><a href="#" class="tag_2">На свадьбу</a></li>
    <li><a href="#" class="tag_2">Супер-скидка</a></li>
    <li><a href="#" class="tag_2">Акции</a></li>
    <li><a href="#" class="tag_2">Петарды</a></li>
    <li><a href="#" class="tag_2">Батареи салютов</a></li>
    <li><a href="#" class="tag_2">Летающие</a></li>
    <li><a href="#" class="tag_2">Петарды</a></li>
    <li><a href="#" class="tag_2">Для праздника</a></li>
    <li><a href="#" class="tag_2">Летающие</a></li>
    <li><a href="#" class="tag_2">Супер-скидка</a></li>
    <li><a href="#" class="tag_2">Со скидкой</a></li>
    <li><a href="#" class="tag_2">Батареи салютов</a></li>
    <li><a href="#" class="tag_2">На свадьбу</a></li>
    <li><a href="#" class="tag_2">Со скидкой</a></li>
    <li><a href="#" class="tag_2">Последний</a></li>
  </ul>
</div>

БЛОГ НА HUSL

Как сверстать список тегов из двух строк с фиксированной высотой?

Ответы (1 шт):