Как убрать перенос элементов на новую строку

02 января 2021, 15:00

У меня есть такая лента:

В ней есть еще 5 игр (таких же блоков с картинками и текстом), но они, из-за недостатка ширины страницы, переносятся на новую строчку(overflow: hidden, поэтому их не видно). Мне нужно сделать так, чтобы они не переносились, и при нажатии на стрелочки список листался.

Как убрать перенос на новую строчку(я пробовал ставить ширину родительскому элементу в 1000px, но они все равно переносились).

Блоки с display: inline-block;

Answer 1

Задайте родительскому элементу свойство white-space: nowrap. Оно запрещает перенос дочерних строчных и блочно-строчных элементов на новую строку.

Answer 2

Вы просите написать готовый слайдер. Вряд ли кто-то захочет тратить своё время на это, как и я, поэтому я просто советую Вам посмотреть принцип его создания на ютубе или поискать в интернете способы создания слайдера на css, а если знаете jquery/js, то можно и на js. Вот самый простой и доступный пример слайдера, который лично я видел в первые минуты поиска в интернете. Возникшие вопросы по методам можно (не всегда без труда) попытаться прояснить. Сделав это своими руками - вы поймете принцип его создания и самое главное - запомните как это должно выглядеть.