Для создания горизонтальной прокрутки можно использовать свойство 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.
Таким образом, в результате будет создан блок с горизонтальной прокруткой, при этом содержимое блока будет доступно для прокрутки горизонтально.
