Задача скрыть блоки по горизонтали (с появлением scroll), которые не помещаются по ширине.
У блоков есть псевдоэлемент ::before с position: absolute. Так вот при свойстве overflow-x: scroll эти элементы обрезаются сверху. А нужно что бы они были видны.
ol {
margin: 0;
padding: 0;
list-style-type: none; /* Убираем исходные маркеры */
counter-reset: num; /* Задаём имя счетчика */
width: 100px;
white-space:nowrap;
border:1px solid black;
overflow-y:visible;
overflow-x:scroll;
}
li {
display: inline-block;
position: relative;
width: 50px;
height: 50px;
box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.15);
margin-right: 5px;
}
li::before {
content: counter(num) ' '; /* Выводим число */
counter-increment: num; /* Увеличиваем значение счётчика */
color: black;
font-style: bold;
font-size: 25px;
position: absolute;
top:-15px;
}
Ответ
div { border:1px solid black; width: 100px; } ul { margin: -15px 0 0 0; padding: 15px 0 0 0; list-style-type: none; /* Убираем исходные маркеры */ counter-reset: num; /* Задаём имя счетчика */ white-space:nowrap; overflow-y:visible; overflow-x:scroll; } li { display: inline-block; position: relative; width: 50px; height: 50px; box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.15); margin-right: 5px; } li::before { content: counter(num) ' '; /* Выводим число */ counter-increment: num; /* Увеличиваем значение счётчика */ color: black; font-style: bold; font-size: 25px; position: absolute; top:-15px; } Some text goes here...
Комментариев нет:
Отправить комментарий