Как создать горизонтально прокручиваемые контейнеры
Контейнеры с горизонтальной прокруткой становятся все более популярными. Особенно среди мобильно оптимизированных сайтов, где они используются для уменьшения высоты веб-страниц.
После реализации нескольких таких элементов я захотел выяснить, как с помощью минимального объема кода создать горизонтальную прокрутку, которая корректно работает, на всех типах пользовательских устройств.
Сначала создадим контейнер и дочерние div внутри него, которые будут прокручиваться по горизонтали.
- Метод пустого пространства
- Метод Flexbox
- Overflow прокрутка
- Полосы прокрутки
- Заключение
<div> <div><h3>Card</h3></div> <div><h3>Card</h3></div> <div><h3>Card</h3></div> <div><h3>Card</h3></div> <div><h3>Card</h3></div> <div><h3>Card</h3></div> <div><h3>Card</h3></div> <div><h3>Card</h3></div> <divclass="card"><h3>Card</h3></div> </div>
Существует два способа сделать эти div горизонтально прокручиваемыми.
Вот CSS, который нам нужен. Никаких префиксов и jQuery. Простое использование overflow и еще одного свойства.
.scrolling-wrapper { overflow-x: scroll; overflow-y: hidden; white-space: nowrap; .card { display: inline-block; } }
Для контейнера нужно отключить вертикальную прокрутку (overflow-y) и включить горизонтальную (overflow-x). Затем для каждой карточки установим display: inline-block, чтобы они отображались в строке.
Свойство CSS, с которым вы, вероятно, не встречались — это white-space: nowrap. Оно используется для управления тем, как текст переносится в контейнере. В данном случае мы хотим отключить перенос с помощью значения nowrap.
Как насчет поддержки браузерами? Идеально. Если вы не заботитесь об Internet Explorer или Edge. В Microsoft говорят, что они включат поддержку этого свойства в будущую версию браузера Edge.
Flexbox также может выполнить эту работу.
.scrolling-wrapper-flexbox { display: flex; flex-wrap: nowrap; overflow-x: auto; .card { flex: 0 0 auto; } }
Мы используем flex-wrap для достижения того же эффекта, что и в предыдущем примере.
Поддержка браузерами решения на основе flexbox лучше. Оно работает в IE и Edge.
В iOS веб-страницы прокручиваются с импульсом ускорения. Если вы быстро протянете пальцем вверх или вниз, страница будет продолжать прокручиваться после того, как уберете палец. Если вы достигнете верхней или нижней части страницы, он а отскочит назад от конца контейнера, прежде чем встанет на место.
.scrolling-wrapper { -webkit-overflow-scrolling: touch; }
Теперь у нас есть прокрутка для горизонтального контейнера. Вот пример того, как это выглядит:
По умолчанию контейнер с прокручиваемым контентом будет иметь полосы прокрутки. Но что, если мы не хотим добавлять скроллинг? Такое решение легко реализовать. Хотя работает оно только в браузерах на WebKit.
.scrolling-wrapper { &::-webkit-scrollbar { display: none; } }
Контейнеры с горизонтальной прокруткой становится все более распространенными.Поэтому лучше сохранить эти примеры:они понадобятся вам в будущем. Также можно обернуть код в медиа-запрос и отобразить горизонтальную прокрутку только для определенных устройств. И никакой головной боли с jQuery!
Вадим Дворниковавтор-переводчик статьи «How To Create Horizontal Scrolling Containers»
Горизонтальные списки
Одним из наиболее распространенных изменений, требуемых при работе со списком, является создание горизонтального списка — то есть, вывод пунктов списка рядом друг с другом, а не один под другим. Это обычный прием при создании навигации сайта. Давайте воспользуемся примером из статьи о навигационных меню (см. рис. 32.14):
Рис. 32.14. Простой список
Давайте преобразуем его в горизонтальный список, как показано на рис. 32.15:
Рис. 32.15. Простой горизонтальный список
Удалить margin и padding из <ul>
Задать для пунктов списка display: inline;
Задать для пунктов списка некоторый пробел справа, чтобы избежать их слипания
В этом примере список имеет ID «mainmenu», поэтому будем использовать его в качестве контекстного селектора, чтобы гарантировать, что изменяется только тот список, который должен быть изменен. Код CSS имеет вид:
#mainmenu {
margin: 0;
padding: 0;
}
#mainmenu li {
display: inline;
padding: 0 1em 0 0;
}
В этом простом примере задание для пунктов меню display: inline; будет достаточно; знайте также, что использование float: left; создает аналогичный вид.
Мы познакомимся больше с плавающими элементами позже в курсе.Ранее мы создали список лент RSS. Теперь давайте представим, что список был помещен в боковую панель сайта. Дизайнер хочет, чтобы список выводился двумя столбцами и с границей вокруг всей группы, как показано на рис. 32.16.
Рис. 32.16. Список лент в двух столбцах с иконкой RSS в качестве маркера
Давайте предположим, что список находится в элементе <div>, который задает ширину и границу. Базовый список будет выглядеть примерно как на рис. 32.17:
Рис. 32.17. Неоформленный список внутри границы
Добавим сначала иконку RSS, как было показано ранее; затем добавим поле 5px сверху, справа и слева:
.rss {
margin: 5px 5px 0 5px;
padding: 0;
}
. rss li {
list-style-type: none;
background: #fff url(«icon-rssfeed.gif») 0 3px no-repeat;
padding: 0 0 5px 15px;
}
Нам не нужно добавлять нижнее поле, так как последний пункт списка будет добавлять правильный интервал своим заполнением, как видно на рис. 32.18:
Рис. 32.18. Полпути пройдено — мы имеем теперь правильный интервал и иконки маркеров
Теперь зададим для пунктов списка display: inline-block;, и зададим их ширину как 40%, а правое поле как 2% (можно использовать также ширину в пикселях). Необходимо также явно задать для <ul> ширину 100%, чтобы гарантировать, что список правильно заворачивается и измеряется:
.rss {
margin: 5px 5px 0 5px;
padding: 0;
width: 100%;
}
. rss li {
display: inline-block;
width: 40%;
margin: 0 2% 0 0;
list-style-type: none;
background: #fff url(«icon-rssfeed.gif») 0 3px no-repeat;
padding: 0 0 5px 15px;
}
В большинстве браузеров этого будет достаточно для создания эффекта столбцов, но нужно будет явно настроить в браузере IE смещение пунктов списка влево. Давайте воспользуемся условным стилевым оформлением для всех версий до IE7 (так как мы еще не знаем, что будут делать будущие версии):
<!—[if lte IE 7]>
<style type=»text/css»>
.rss li {
float: left;
}
</style>
<![endif]—>
Мы имеем теперь требуемый двухстолбцовый результат, как видно на рис. 32.19:
Рис. 32.19. Готовый список
css — Почему мои списки UL отображаются горизонтально?
спросил
Изменено 1 год, 8 месяцев назад
Просмотрено 252 раза
Я пытаюсь сделать так, чтобы нижний колонтитул отображал 4
горизонтально, но он отображает его вертикально
Я попробовал
display:inline;
но это не сработало
вот код
.row { ширина: 100%; дисплей: гибкий; flex-wrap: обернуть; выравнивание элементов: по центру; } .строка:: после { дисплей: таблица; ясно: оба; содержание: ""; } .col-5 { ширина: 41,66%; }
<нижний колонтитул> <строка> <дел>Компания
<ул>