Как сделать скролл на табах?

Question

[timers]

Не могу решить одну проблему, сделать скролл в мобильной версии, все голову уже сломал кто подскажет куда копать?

Код: https://jsfiddle.net/jr4gpn6s/

Нужно чтобы - Вкладка №1 Вкладка №2 Вкладка №3 Вкладка №4 попадали в скролл, а не выстраивались в столбик при сужении.

Спасибо!

Answer 1

[WapSter]

Твой код вообще не очень, переписал адекватно.

Answer 2

[Daniil Dubrava]

Блок .tabs должен закрываться на 13 строке, т.к. табсы именно эти пункты, а не весь контент. Для .tabs необходимо добавить:

overflow: auto;
white-space: nowrap;

Тогда блоки не будут переноситься + появится скролл. Но лучше почитать про flexbox и пользоваться им. Это намного проще чем ставить для div inline-block.

Comments

[timers]

Да но он тогда двигается и с нижним блоком, а мне нужно чтобы только вкладки двигались.

[Daniil Dubrava]

timers, если добавить те две строчки и закрыть блок, то будет двигаться только блок с вкладками при определенной ширине

[timers]

Daniil Dubrava, да но блок то в любом случае должен быть открыт