Сделать горизонтальную прокрутку css

Для создания горизонтальной прокрутки можно использовать свойство overflow-x: auto или overflow-x: scroll в сочетании с указанием ширины блока, чтобы прокрутка стала доступной, когда содержимое блока выходит за его пределы.

Пример HTML-кода:

<div class="container">
  <div class="content">Здесь расположены элементы, которые будут прокручиваться горизонтально.</div>
</div>

Пример CSS-кода:

.container {
  overflow-x: auto; /* или overflow-x: scroll */
  white-space: nowrap; /* убрать перенос строк */
  width: 100%; /* задать ширину блока */
}

.content {
  display: inline-block; /* расположить элементы в одну линию */
  width: 1200px; /* задать ширину контента (должна быть больше ширины блока) */
}

В этом примере блок .container получает свойства для создания прокрутки. Свойство overflow-x: auto добавляет горизонтальную прокрутку к блоку, которая появится только тогда, когда содержимое блока выходит за его пределы. Свойство white-space: nowrap задает режим без переноса слов для блока. Свойство width: 100% задает блоку ширину, занимающую всю доступную ширину родительского элемента.

Внутри блока .container располагается блок .content со свойством display: inline-block. Свойство display: inline-block помогает расположить элементы в одну линию. Важно задать ширину контента .content, которая должна быть больше ширины блока .container, чтобы была возможность прокручивать содержимое. Ширина контента в примере задана равной 1200px.

Таким образом, в результате будет создан блок с горизонтальной прокруткой, при этом содержимое блока будет доступно для прокрутки горизонтально.