Css горизонтальный список: Как разместить элементы списка горизонтально?

Как создать горизонтально прокручиваемые контейнеры

2022-12-11

Контейнеры с горизонтальной прокруткой становятся все более популярными. Особенно среди мобильно оптимизированных сайтов, где они используются для уменьшения высоты веб-страниц.

После реализации нескольких таких элементов я захотел выяснить, как с помощью минимального объема кода создать горизонтальную прокрутку, которая корректно работает, на всех типах пользовательских устройств.
Сначала создадим контейнер и дочерние 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.

Четыре строки свойств CSS, и у нас есть горизонтально прокручиваемый контейнер.
Как насчет поддержки браузерами? Идеально. Если вы не заботитесь об 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 месяцев назад

Изменено 1 год, 8 месяцев назад

Просмотрено 252 раза

Я пытаюсь сделать так, чтобы нижний колонтитул отображал 4

горизонтально, но он отображает его вертикально Я попробовал display:inline; но это не сработало вот код

 .row {
  ширина: 100%;
  дисплей: гибкий;
  flex-wrap: обернуть;
  выравнивание элементов: по центру;
}
.строка:: после {
  дисплей: таблица;
  ясно: оба;
  содержание: "";
}
.col-5 {
  ширина: 41,66%;
} 

 <нижний колонтитул>
  <строка>
    <дел>
       
Компания
 
      <ул>
        
О нас
        
Носители
        
Блоги