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

Содержание

html список в строку — ComputerMaker.info

Автор admin На чтение 7 мин. Просмотров 90 Опубликовано

Есть несколько способов как можно изменить вертикальное расположение на горизонтальное. Самое распространенное это с помощью свойства CSS display со значением inline (допускается также inline-block) у тега
. Помимо этого, можно использовать свойство CSS float.

Рассмотрим все варианты создания горизонтального списка на примерах.

Примеры с горизонтальным списом

Пример 1. Горизонтальный список display: inline

Вот как это выглядит на странице:

Пример 2. Простое горизонтальное меню

Здесь мы будем применять свойство display: inline-block для задания блочности элементам.

Вот как это выглядит на странице:

Пример 3. Через свойство float:left

Этот способ применяется не часто. С помощью выравнивания свойством float можно сделать горизонтальное расположение списка. В примере приведено выравнивание по левому краю. Можно сделать также выравнивание по правому краю (float:right)

Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 1.0+ 7.0+ 3.0+ 1.0+ 1.0+ 1.0+

Задача

Вывести маркированный список в одну строку и убрать отображение маркеров.

Решение

Элементы списка по умолчанию выстраиваются вертикально друг под другом, но иногда требуется разместить их по горизонтали, например, для создания различных меню. В таком случае к селектору LI следует добавить стилевое свойство display со значением inline , оно преобразует блочный элемент в строчный (пример 1).

Пример 1. Горизонтальный список

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Горизонтальный список

Из-за того, что вокруг списка автоматически добавляются отступы, их следует изменить, добавляя свойства margin и padding к селектору UL , как показано в примере.

Отобразить маркированый список горизонтально без маркеров.

Тег маркированного списка

    по умолчанию выводит элементы
    вертикально друг над другом. Для создания элементов навигации, в некоторых случаях, удобно выводить список горизонтально. Для получения такого отображения списка есть несколько способов.

Вам уже должно быть известно, что в HTML есть блочные и строчные элементы. Строчные элементы не создают своих блоков, пример таких элементов — это теги или

. Блочные элементы отображаются с новой строки и создают прямоугольный блок, пример таких тегов

. Так вот, тег
также является блочным элементом.

Чтобы тег
не вёл себя как блочный элемент, можно при помощи CSS сделать его строчным.

За то, как элемент будет отображён в документе отвечает CSS свойство display . Рассмотрим три его значения (хотя их больше):

  • block — элемент отображается как блочный.
  • inline — элемент отображается как строчный.
  • inline-block — блочно-строчный элемент, подробнее про этот тип элементов читайте ниже, мы будем его использовать.

Сначала сделаем горизонтальный список превратив его пунткы в строчные элементы. В стиле CSS пропишем правило, в котором селектору li установлено свойство display со значением inline .

Знак > в селекторе указывает что мы обращаемся только к дочерним элементам
тега

    с классом menu-top . Читайте подробнее про дочерние селекторы.

Итак, этот стиль сработал и получили горизонтальное расположение пунктов списка:

Рисунок 1. Работа примера №1.

У этого метода есть недостатки. Дело в том, что inline элементы имеют некоторые ограничения, по сравнению с блочными элементами. Например им нельзя задавать ширину и высоту, а блочным можно.

Например нам нужно чтобы элемент создаваемого нами меню имел ширину 150px и высоту 40px . Попробуем изменить стиль на следующий, то есть добавим два правила устанавливающих размер пункта меню:

Эти правки не приведут ни к каким изменениям. Чтобы элементы меню располагались горизонтально и можно было устанавливать их ширину и высоту им нужно установить тип inline-block . Изменим код нашего примера:

Этот код работает и изменения видны:

Рисунок 2. Работа примера №2.

Но могут быть разные варианты, например нам нужно отобразить в меню вложенные списки:

Вот результат работы этого кода:

Рисунок 3. Работа примера №3.

Мы видим что блоки выравниваются по высоте не так, как нам хотелось бы. Конечно, можно указать для всех блоков одинаковую высоту, но не всегда нам заранее известно её точное значение, и оно может меняться.

А собственно, почему так происходит?

Наши блоки имеют свойство display со значением inline-block . Это значит что у них есть качества как блочных элементов (возможность указать ширину и высоту), так и строчных элементов. То что мы наблюдаем — это качество строчных элементов.

Давайте рассмотрим строку с символами «А» разной величины:

Мы видим что все буквы по вертикали выравнены по нижней линии. Точнее по базовой линии, но сейчас не будем влазить в дебри. Так вот, с нашими блоками произошло то же самое.

Для выравния текста по вертикали служит свойство vertical-align . В нашем примере №3 нужно использовать значение top , которое выравняет верхнюю границу элемента по верху самого высокого элемента строки.

Пока применим его к строке с символами «А» разной величины:

Кажется, что буквы немного «скачут». Я установил CSS границу border самой высокой букве, чтобы было видно, что скачков на самом деле нет, есть пустое пространство между верхней границей (по которой происходит выравнивание) и верхней точкой символа «А».

Свойство vertical-align нужно применять к каждому строчному элементу, оно не наследуется. Вы можете прочитать подробней про это свойство: vertical-align.

После этого отступления продолжим размещать элементы списка горизонтально.

Второй способ

Разместить элементы списка горизонтально можно используя свойство float . Это свойство указывает по какой стороне выравнивается элемент, имеет две позиции: left и right .

Вот пример с использованием этого кода:

Вот результат работы кода:

Рисунок 4. Работа примера.

Вроде пример работает. Но в использовании этого свойства есть один нюанс. Сейчас мы его рассмотрим. Для примера возьмём код, в котором есть два горизонтальных списка с разным способом расположения элементов горизонтально: display и float :

Вот результат работы кода:

Рисунок 5. Работа примера.

В этих примерах контейнеры списка

    имеют красную границу толщиной 1 пиксел. Но верхний список, в котором используется свойство display , включает в себя элементы списка. А вот элементы списка созданного с использованием свойства float выпадают из своего контейнера.

При этом на первый взгляд всё работает. Но давайте поменяем местами наши списки. Поставим список с классом menu-1 в коде перед списком с классом menu-2 (сейчас он ниже).

Вот что мы получим в результате:

Рисунок 6. Работа примера.

Пункты нижнего меню также обтекают вержнее меню, ведь действие свойства float никто не отменял и оно распространяется на все последующие элементы.

Как решить эту проблему?

Для этого нужно использовать свойство clear , оно отменяет обтекание элементом другого элемента, если у того установлено свойство float .

Вот изменённый пример с использованием свойства clear :

Видно что нижний список уже не обтикает верхний, элементы не наезжают друг на друга. Но в первом списке теги
всё ещё располагаются вне контейнера

Рисунок 7. Работа примера.

Кроме того, в работе нам не всегда известно какой элемент будет следовать за элементом использующим float . Идеальный был бы вариант закрытия работы свойства float в том же блоке, в котором он открыт.

Это делается при помощи псевдоэлемента. Вот код:

Теперь у нас 100% рабочий код.

Рисунок 8. Работа примера.

Этот приём со свойством float обычно используют при вёрстке сайтов для выравнивания столбцов, которые создаются тегами

Но для полноты раскрытия темы мы тут ознакомились со всеми возможными вариантами. Хотя может есть и другие способы, например использование CSS-таблиц, но поисковики настойчиво рекомендуют использовать таблицы только по их прямому назначению, а не для организации элементов навигации или ещё как-либо.

Как сделать горизонтальное меню на CSS

Простое горизонтальное меню

HTML

Cписку меню присвоен стилевой идентификатор, например, [glavnoeMenu] — уникальное имя, которое используется для изменения его стиля.

<ul>
 <li><a title="" href="#">Пункт один</a></li>
 <li><a title="" href="#">Пункт два</a></li>
 <li><a title="" href="#">Пункт три</a></li>
 <li><a title="" href="#">Пункт четыре</a></li>
 <li><a title="" href="#">Пункт пять</a></li>
</ul>

CSS

#glavnoeMenu,
#glavnoeMenu ul
{
 list-style: none; /* Убираем маркеры списка меню */
}
#glavnoeMenu
{
 float: left; /* Выравниваем по левой стороне */
}
#glavnoeMenu > li
{
 float: left; /* Выравниваем по левой стороне */
}
#glavnoeMenu li a
{
 display: block; /* Меню — блочный элемент */
 margin: 0 1em; /* Отделяем пункты меню отступами слева-справа */
 padding: 0; /* Нулевые значения полей вокруг ссылки */
}

Горизонтальное меню с вложенным списком подпунктов

1. Создаем HTML структуру меню — список пунктов с ссылками. Один из пунктов основного меню, например, третий, имеет вложенный список подпунктов.

Основному списку присвоен стилевой идентификатор [glavnoeMenu] — уникальное имя, которое используется для изменения его стиля.

HTML

<ul>
 <li><a title="" href="#">Пункт один</a></li>
 <li><a title="" href="#">Пункт два</a></li>
 <li><a title="" href="#">Пункт три</a>
 <ul>
 <li><a title="" href="#">Подпункт один</a></li>
 <li><a title="" href="#">Подпункт два</a></li>
 <li><a title="" href="#">Подпункт три</a></li>
 </ul>
 </li>
 <li><a title="" href="#">Пункт четыре</a></li>
 <li><a title="" href="#">Пункт пять</a></li>
</ul>

CSS

#glavnoeMenu,
#glavnoeMenu ul
{
 list-style: none; /* Убираем маркеры списка меню */
}
#glavnoeMenu
{
 float: left; /* Выравниваем по левой стороне */
}
#glavnoeMenu > li
{
 float: left; /* Выравниваем по левой стороне */
}
#glavnoeMenu li a
{
 display: block; /* Меню — блочный элемент */
 margin: 0 1em; /* Отделяем пункты меню отступами слева-справа */
 padding: 0; /* Нулевые значения полей вокруг ссылки */
}
#glavnoeMenu li ul
{
 background: none repeat scroll 0 0 #FFFFFF; /* Фон списка с
 
подпунктами, белый */
 display: none; /* Вложенный список с подпунктами не отображается */
 position: absolute; /* Имеет абсолютное позиционирование */
 z-index: 9999999; /* Список с подпунктами перекрывает
 
другие объекты веб-страницы */
}
#glavnoeMenu li ul li a
{
 margin: 0; /* Нулевой отступ */
 padding: 0.3em 1em; /* Внутренние поля ссылки подпункта*/
}
#glavnoeMenu li:hover ul
{
 display: block; /* Отображение списка с
 
подпунктами при наведении — блочный элемент */
 margin: 0;
 padding: 0.1em 0;
}

Дальнейшее оформление — по вкусу.

Демонстрация меню

 

В случаях размещения меню слева или справа страницы, отступ от края (левого или правого) может нарушить сетку. Для исправления необходимо, в левом варианте, присвоить класс [first] первому пункту и [last] последнему в правом варианте. В стили добавить описание варианта класса:

#glavnoeMenu li a.first
{
 display: block;
 margin: 0 1em 0 0; /* Убираем левый отступ */
 padding: 0;
}
или
#glavnoeMenu li a.last 
{
 display: block;
 margin: 0 0 0 1em; /* Убираем правый отступ */
 padding: 0;
}

Можно ограничить ширину блока вложенного списка. Для этого нужно прописать стиль, указав точную ширину, например 150px.

#glavnoeMenu ul li a 
{
 width: 150px;
}

Как сделать горизонтальный список css

Как расположить элементы горизонтально html

Элементы списка (тег <ul>) по умолчанию располагаются вертикально:

  • Элемент #1
  • Элемент #2
  • Элемент #3

Есть несколько способов как можно изменить вертикальное расположение на горизонтальное. Самое распространенное это с помощью свойства CSS display со значением inline (допускается также inline-block) у тега <li> . Помимо этого, можно использовать свойство CSS float.

Рассмотрим все варианты создания горизонтального списка на примерах.

Примеры с горизонтальным списом
Пример 1. Горизонтальный список display: inline

Вот как это выглядит на странице:

  • Элемент #1
  • Элемент #2
  • Элемент #3
  • Элемент #4
Пример 2. Простое горизонтальное меню

Здесь мы будем применять свойство display: inline-block для задания блочности элементам.

Вот как это выглядит на странице:

Пример 3. Через свойство float:left

Этот способ применяется не часто. С помощью выравнивания свойством float можно сделать горизонтальное расположение списка. В примере приведено выравнивание по левому краю. Можно сделать также выравнивание по правому краю (float:right)

Как разместить пункты списка горизонтально?

Пункты списка по умолчанию выстраиваются вертикально друг под другом, но иногда требуется разместить их по горизонтали, например, для создания различных меню. В таком случае к селектору li следует добавить стилевое свойство display со значением inline-block , оно преобразует элемент в строчно-блочный (пример 1).

Пример 1. Горизонтальный список

Результат данного примера показан на рис. 1.

Рис. 1. Горизонтальный список

Из-за того, что вокруг списка автоматически устанавливаются отступы, их желательно убрать, добавляя свойства margin и padding с нулевым значением к селектору ul .

Заметьте, что между пунктами списка появляется небольшое расстояние. Как его убрать читайте этот рецепт.

Способы размещения блоков горизонтально

Часто на практике приходится решать задачу группирования и выравнивания контента средствами CSS. Сегодня мы рассмотрим основные способы размещения элементов в горизонтальный ряд.

Материал данной статьи призван помочь начинающим веб-дизайнерам в освоении приемов верстки web-страниц.

Из чего выбрать или методы

Существует несколько способов расположения структурных элементов в ряд в горизонтальной плоскости. Наиболее полезными, с точки зрения практического применения, являются:

  • метод «Float»
  • метод «Inline-block»
  • метод «Table-cell»

Каждый из них имеет свои преимущества, области применения и недостатки. Рассмотрим их по порядку.

«Для рывка» или немного теории

Все структурные элементы HTML можно условно разделить на:

Инлайновые (встроенные) – типа img, span и им подобные. У нас нет возможности менять их фон и задавать им произвольные линейные размеры.

Блочные – занимающие всю ширину родительского блока, всегда начинаются с новой строки – p, h, div.

Наглядный пример встроенных и блочных структур приведен ниже:

Метод «Float»

Как уже известно (см. выше), блочный элемент размещается с новой строки вне зависимости от заданной ему ширины (width). По этому, уменьшая горизонтальный размер div-а, в рядок блочки не построить.

Наиболее популярный (особенно среди начинающих верстальщиков), метод решения это использование свойства float.

CSS свойство float обрело большую популярность и практическую ценность после перехода от табличного способа верстки к блочному.

Float: left (right) трансформирует блочный элемент в плавающий, выравнивает по левому (правому) краю родительского блока и устанавливает обтекание справа (слева) текстом и другими элементами.

Для примера, создадим четыре блока, которые нужно разместить в ряд:

И внешнюю таблицу стилей с следующим содержимым:

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

Иногда на практике бывает необходимо выровнять блоки по правому краю родительского элемента. Изменим обтекание блоков в предыдущем примере:

Обратите внимание на надписи, расположенные в блоках. На первый взгляд может показаться, что пример отработал криво. Но на самом деле, браузер обработал код правильно: прочитал блоки сверху вниз, и сделал то, что мы от него просили &#8212; выровнял по правому краю. Учтите этот момент при использовании свойства float: right.

Для того, чтобы прервать обтекание элементов с какого-то конкретного места, используйте строчку:

В рассмотренном выше примере расстояния между блоками мы задавали при помощи отступа margin-right. Но что делать, если у вас при верстке страницы возникла задача: разместить блоки в ряд, центрировать их, да и еще чтобы отступы были только между ними, но никак не снаружи?

Алгоритм действий следующий.

В результате получаем такую картину:

Ну что же, всех практических ситуаций не рассмотришь, по этому перейдем к общим особенностям.

    Ширина блоков должна быть фиксированной. Иначе получите что-то такое:

Метод «Inline-block»

Как строчные так и блочные элементы имеют свои преимущества и недостатки в контексте каждой конкретной решаемой задачи. А что если объединить их преимущества?

Встречайте, гвоздь программы – свойство display: inline-block.

display: inline-block генерирует блочно-строчный элемент, который по сути является строчным, но сохраняет блочные свойства – позволяет изменять линейные размеры, задавать поля, отступы и т.д.

Блочно-строчный элемент имеет следующие свойства:

  • высота и ширина блока определяется автоматически по содержимому и значению отступов (padding)
  • высота и ширина блока может быть задана фиксировано
  • Отсутствует эффект схлопывания границ.

Рассмотрим пример создания простого навигационного меню, содержащего картинку и ссылку.

В результате получаем такую менюшку:

Как видим, получилось кривовато. Но расстраиваться мы не намерены, по-этому применяем к нашим дивам CSS свойство vertical-align (подробнее см. ниже):

Теперь наша навигационная панель выровнялась по верхней линии:

Конечно, приведенный пример является примитивным, но я уверен, что на его основе вы сможете создать настоящий шедевр.

  1. При уменьшении ширины окна обозревателя невмещающийся элемент перемещаеться вниз (как в случае float: left)
  2. Элемент, отображаемый как inline-block чувствителен к пробелам. Это приводит к тому, что даже при нулевых значениях margin между блоками будет зазор. Зазор этот зависит от применяемого шрифта. Для примера рассмотрим список:
    HTML:

Результатом рендеринга такого кода будет следующая картина:

Есть несколько способов убрать зазоры:

    подобрать отрицательные значения margin:

Результатом применения любого из выше перечисленных приемов будет следующая структура:

    Для древних версий Firefox добавляем строчку:
Метод «Table»

Табличный подход долгое время был стандартом верстки, что в первую очередь объяснялось простотой и интуитивной понятностью разметки. Скорее всего, именно это и послужило причиной появления табличного форматирования в CSS.

Свойства display: table (table-cell, inline-table), позволяют выполнять табличное форматирование элементов без применения HTML таблиц.

Для горизонтального размещения блоков нам понадобится родительский элемент, имеющий свойство display: table, и дочерние элементы (ячейки), имеющие свойство display: table-cell:

Древовидные списки разных вариаций

Древовидный вид HTML списков является лучшим вариантом визуального обзора и изучения их иерархической структуры. Рассмотрим несколько преобразований обычного HTML списка в более наглядное древовидное состояние при помощи магии CSS стилей.

1. Пример обычного HTML списка

  • Компоненты
  • Плагины
  • Модули
HTML разметка списка

2. Пример HTML списка с соединительными линиями

Присвоим тегу <ul> класс treeline для создания соединительных линий каждого раздела списка.

  • Компоненты
  • Плагины
  • Модули
HTML разметка списка с соединительными линиями
CSS стили списка с соединительными линиями

3. Пример раскрывающегося HTML списка

  • Компоненты
  • Плагины
  • Модули
HTML разметка раскрывающегося списка

К предыдущей разметке добавляем <div >+</div> для реализации функции раскрытия элементов древовидного списка.

CSS стили раскрывающегося списка

К CSS из предыдущего примера необходимо дописать следующие стили:

Скрипт, реализующий функцию раскрывающегося списка

Помимо HTML и CSS, данный способ оформления древовидных списков требует использование JS:

Данный JS код можно вставить в конец материала, пройдя в режим просмотра исходного кода. Учтите, что код скрипта может обрезаться редактором и, соответственно, не работать. В этом случае пройдите в настройки редактора и разрешите использование тега <script> .

Простое горизонтальное меню на CSS

Пример создания на CSS простого горизонтального меню с выпадающими списками.

Меню не имеет альтернативной мобильной версии, но она может и не пригодиться, т.к. пункты меню хорошо складываются на узких экранах.

Пример:

Активные пункты <li> верхнего меню имеют класс active , а пункты с вложениями menu-children

  • Опубликовано: 07.02.2020
  • Рубрики: Меню и аккордеоны
  • Метки: CSS
  • 7771 просмотр
Смотрите также:

Вертикальный аккордеон для фотографий

Вертикальный аккордеон с раскрывающимися по клику фотографиями

Аккордеон на CSS

Вариант создания аккордеона на чистом CSS

Полноэкранное мобильное меню

Полноэкранное мобильное меню с фиксированной иконкой-гамбургер

Добавить комментарий:
Комментарии:

Привет. Было бы круто, если бы вы показали как сделать горизонтальное меню с прокруткой в сторону для мобильной версии.

Ну оно на мобилу и не задумывалось.
Смысл, что оно там прячется, и ставится вроде этого:
А если делать горизонтальную прокрутку, то ставить его в какой то контейнер, но там может возникнуть проблема с выпадайкой.

Это да. Пробовал, но так и не получилось ничего. Точнее сказать поставить то я его поставил, но вот скролл не удалось убрать. Вот тут код брал.

Было бы круто, если бы вы реализовали подписку на комментарии на вашем сайте. Не очень удобно &#128578;

но вот скролл не удалось убрать

Я так и не понял, вам нужно убрать скрол или поставить?
Если убрать из вашего примера, то уберите просто white-space: nowrap;

Группа списков. Компоненты · Bootstrap. Версия v4.3.1

Группы списков — это гибкий и мощный компонент для отображения контента. Измените и расширьте их так, чтобы поддерживать практически любой контент внутри.

Базовые примеры

Самая простая группа списков – это неупорядоченный список из элементов нужных классов. Создавайте на этой основе свою разметку и свой CSS, если нужно.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<ul>
  <li>Cras justo odio</li>
  <li>Dapibus ac facilisis in</li>
  <li>Morbi leo risus</li>
  <li>Porta ac consectetur ac</li>
  <li>Vestibulum at eros</li>
</ul>

Активные элементы

Добавьте в .list-group-item класс .active для обозначения текущего активного выбора.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<ul>
  <li>Cras justo odio</li>
  <li>Dapibus ac facilisis in</li>
  <li>Morbi leo risus</li>
  <li>Porta ac consectetur ac</li>
  <li>Vestibulum at eros</li>
</ul>

Неактивные элементы

Добавьте класс .disabled к элементу класса .list-group-item для придания последнему вида «неактивного». Заметьте, что некоторые элементы класса .disabled также потребуют JavaScript для полной деактивации их событий клика (например, ссылки).

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<ul>
  <li>Cras justo odio</li>
  <li>Dapibus ac facilisis in</li>
  <li>Morbi leo risus</li>
  <li>Porta ac consectetur ac</li>
  <li>Vestibulum at eros</li>
</ul>

Ссылки и кнопки

Используйте <a> или <button> для создания элементов группы списка с возможностью возложить на них некое действие – с наличием «ховера» (наведения), неактивных и активных состояний – добавляя в них .list-group-item-action. Мы разделяем эти псевдоклассы для уверенности в том, что группы списков, созданные из не-интерактивных элементов (как <li> или <div>), не будут позволять поддержку касания или клика.

Удостоверьтесь, что не используете стандартные классы .btn в описанном выше случае.

<div>
  <a href="#">
    Cras justo odio
  </a>
  <a href="#">Dapibus ac facilisis in</a>
  <a href="#">Morbi leo risus</a>
  <a href="#">Porta ac consectetur ac</a>
  <a href="#">Vestibulum at eros</a>
</div>

В <button> вы можете также использовать атрибут disabled вместо класса .disabled. К сожалению, <a> не поддерживают отключенный атрибут.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

<div>
  <button type="button">
    Cras justo odio
  </button>
  <button type="button">Dapibus ac facilisis in</button>
  <button type="button">Morbi leo risus</button>
  <button type="button">Porta ac consectetur ac</button>
  <button type="button" disabled>Vestibulum at eros</button>
</div>

Смывание

Добавьте класс .list-group-flush чтобы удалить некоторые границы и закругленные углы, а также чтобы отображать элементы группы списка от края до края в родительском контейнере (например, в карточках).

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<ul>
  <li>Cras justo odio</li>
  <li>Dapibus ac facilisis in</li>
  <li>Morbi leo risus</li>
  <li>Porta ac consectetur ac</li>
  <li>Vestibulum at eros</li>
</ul>

Горизонтальный

Добавьте .list-group-horizontal, чтобы изменить расположение элементов группы списков с вертикального на горизонтальное для всех точек останова. Или же выберите адаптивный вариант .list-group-horizontal-{sm|md|lg|xl}, чтобы сделать группу списков горизонтальной, начиная с min-width точки останова. В настоящее время горизонтальные группы списков не могут быть объединены с группами списков смывания.

ProTip: Хотите, чтобы элементы списка равной ширины были горизонтальными? Добавьте .flex-fill к каждому элементу группы списков.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
<ul>
  <li>Cras justo odio</li>
  <li>Dapibus ac facilisis in</li>
  <li>Morbi leo risus</li>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
<ul>
  <li>Cras justo odio</li>
  <li>Dapibus ac facilisis in</li>
  <li>Morbi leo risus</li>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
<ul>
  <li>Cras justo odio</li>
  <li>Dapibus ac facilisis in</li>
  <li>Morbi leo risus</li>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
<ul>
  <li>Cras justo odio</li>
  <li>Dapibus ac facilisis in</li>
  <li>Morbi leo risus</li>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
<ul>
  <li>Cras justo odio</li>
  <li>Dapibus ac facilisis in</li>
  <li>Morbi leo risus</li>
</ul>

Контекстуальные классы

Используйте их для стилизации элементов списка и придания им оттенков смысла с помощью цвета и фона.

  • Dapibus ac facilisis in
  • Элемент основной группы списков
  • Дополнительный элемент группы списков
  • Элемент группы списка успешных действий
  • Элемент группы списка опасности
  • Элемент группы списка предупреждений
  • Элемент группы списка информации
  • Элемент группы с легким списком
  • Элемент группы темных списков
<ul>
  <li>Dapibus ac facilisis in</li>

  
  <li>Элемент основной группы списков</li>
  <li>Дополнительный элемент группы списков</li>
  <li>Элемент группы списка успешных действий</li>
  <li>Элемент группы списка опасности</li>
  <li>Элемент группы списка предупреждений</li>
  <li>Элемент группы списка информации</li>
  <li>Элемент группы с легким списком</li>
  <li>Элемент группы темных списков</li>
</ul>

Контекстуальные классы также работают с классом .list-group-item-action. Отметим наличие дополнения стилей «ховера» (наведения), которых нет в предыдущем примере. Активное состояние .active также поддерживается, применяйте его для индикации активного выбора в элементе контекстуальной группы списка.

<div>
  <a href="#">Dapibus ac facilisis in</a>

  
  <a href="#">Элемент основной группы списков</a>
  <a href="#">Дополнительный элемент группы списков</a>
  <a href="#">Элемент группы списка успешных действий</a>
  <a href="#">Элемент группы списка опасности</a>
  <a href="#">Элемент группы списка предупреждений</a>
  <a href="#">Элемент группы списка информации</a>
  <a href="#">Элемент группы с легким списком</a>
  <a href="#">Элемент группы темных списков</a>
</div>
Использование вспомогательных технологий

Использование цвета как дополнительного инструмента информативности доступно только в визуальной сфере, что ограничивает пользователей вспомогательных технологий, например, программ для чтения текста с экрана. Удостоверьтесь, что информация, обозначенная цветом, также доступна из самого контента (т.е. в тексте) или содержится в альтернативных средствах – таких как дополнительный скрытый в классе .sr-only текст.

Со значками

Добавляйте значки в любой элемент группы списков для показа счетчиков, активности и т.п. с помощью утилит.

  • Cras justo odio 14
  • Dapibus ac facilisis in 2
  • Morbi leo risus 1
<ul>
  <li>
    Cras justo odio
    <span>14</span>
  </li>
  <li>
    Dapibus ac facilisis in
    <span>2</span>
  </li>
  <li>
    Morbi leo risus
    <span>1</span>
  </li>
</ul>

Стандартное содержимое

Добавьте почти любой код HTML с помощью утилит флексбокса, даже для групп списков со ссылками, как в примере ниже.

<div>
  <a href="#">
    <div>
      <h5>List group item heading</h5>
      <small>3 days ago</small>
    </div>
    <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small>Donec id elit non mi porta.</small>
  </a>
  <a href="#">
    <div>
      <h5>List group item heading</h5>
      <small>3 days ago</small>
    </div>
    <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small>Donec id elit non mi porta.</small>
  </a>
  <a href="#">
    <div>
      <h5>List group item heading</h5>
      <small>3 days ago</small>
    </div>
    <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small>Donec id elit non mi porta.</small>
  </a>
</div>

Поведение JavaScript

Используйте плагин вкладок JavaScript – индивидуальный или через bootstrap.js — для расширения группы списков и создания панелей содержимого с возможностью навигации через TAB.

Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.

Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.

Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum.

Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.

<div>
  <div>
    <div role="tablist">
      <a data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
      <a data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
      <a data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
      <a data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
    </div>
  </div>
  <div>
    <div>
      <div role="tabpanel" aria-labelledby="list-home-list">...</div>
      <div role="tabpanel" aria-labelledby="list-profile-list">...</div>
      <div role="tabpanel" aria-labelledby="list-messages-list">...</div>
      <div role="tabpanel" aria-labelledby="list-settings-list">...</div>
    </div>
  </div>
</div>

Используя атрибуты

Вы можете активировать навигацию в группе списка без JavaScript, а просто добавив data-toggle="list" в элемент. Используйте эти атрибуты в .list-group-item.

<!-- List group -->
<div role="tablist">
  <a data-toggle="list" href="#home" role="tab">Home</a>
  <a data-toggle="list" href="#profile" role="tab">Profile</a>
  <a data-toggle="list" href="#messages" role="tab">Messages</a>
  <a data-toggle="list" href="#settings" role="tab">Settings</a>
</div>

<!-- Tab panes -->
<div>
  <div role="tabpanel">...</div>
  <div role="tabpanel">...</div>
  <div role="tabpanel">...</div>
  <div role="tabpanel">...</div>
</div>

Через JavaScript

Задействуйте навигацию через TAB через JavaScript (каждый элемент списка надо активировать отдельно):

$('#myList a').on('click', function (e) {
  e.preventDefault()
  $(this).tab('show')
})

Вы можете активировать отдельный элемент списка несколькими способами:

$('#myList a[href="#profile"]').tab('show') // Select tab by name
$('#myList a:first-child').tab('show') // Select first tab
$('#myList a:last-child').tab('show') // Select last tab
$('#myList a:nth-child(3)').tab('show') // Select third tab

Эффект угасания

Чтобы заставить панель вкладок постепенно появиться, добавьте класс .fade в каждый элемент класса .tab-pane. На первой панели вкладки также должно быть выставлено значение .show, чтобы сделать начальное содержимое видимым.

<div>
  <div role="tabpanel">...</div>
  <div role="tabpanel">...</div>
  <div role="tabpanel">...</div>
  <div role="tabpanel">...</div>
</div>

Методы

$().tab

Активирует элемент списка и контейнер содержимого. Вкладка должна иметь или data-target, или href «нацеленный» на «узел контейнера» в DOM.

<div role="tablist">
  <a data-toggle="list" href="#home" role="tab">Home</a>
  <a data-toggle="list" href="#profile" role="tab">Profile</a>
  <a data-toggle="list" href="#messages" role="tab">Messages</a>
  <a data-toggle="list" href="#settings" role="tab">Settings</a>
</div>

<div>
  <div role="tabpanel">...</div>
  <div role="tabpanel">...</div>
  <div role="tabpanel">...</div>
  <div role="tabpanel">...</div>
</div>

<script>
  $(function () {
    $('#myList a:last-child').tab('show')
  })
</script>
.tab(‘show’)

Выбирает данный элемент списка и показывает связанные с ним панели. Любой другой элемент списка, который был ранее выбран, становится «невыбранным», а связанные с ним панели – скрытыми. Возвращается к функции-вызову до того, как показалась панель вкладки (например, до события shown.bs.tab).

$('#someListItem').tab('show')

События

При показе новой вкладки события запускаются в таком порядке:

  1. hide.bs.tab (на текущей активной вкладке)
  2. show.bs.tab (на вкладке, которая вот-вот покажется)
  3. hidden.bs.tab (на предыдущей активной вкладке, такое же, как для события hide.bs.tab)
  4. shown.bs.tab (на вкладке, только что ставшей активной и только что ставшей показанной, такое же, как для события show.bs.tab)

Если ни одна вкладка еще не была активной, события hide.bs.tab и hidden.bs.tab не произойдут.

Тип события Описание
show.bs.tab Используйте события event.target и event.relatedTarget для «нацеливания» на соответственно на активную и предыдущую активную (если она доступна) вкладки.
shown.bs.tab Это событие наступает при показе вкладки, после того, как она показана. Используйте события event.target и event.relatedTarget для «нацеливания» соответственно на активную и предыдущую активную (если она доступна) вкладки.
hide.bs.tab Это событие наступает, когда вот-вот покажется новая вкладка (и предыдущая, т.о., вот-вот скроется). Используйте события event.target и event.relatedTarget для «нацеливания» соответственно на активную текущую вкладку и ту, которая вот-вот откроется.
hidden.bs.tab Это событие наступает, когда показана новая вкладка (и предыдущая активная, т.о., скрылась). Используйте события event.target и event.relatedTarget для «нацеливания» соответственно на предыдущую активную и новую активную вкладки.
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Выравнивание списков средствами CSS

Список по центру

Автоматически центрировать список вне зависимости от длины строк достаточно просто

/* -- Стиль CSS --*/
div.center_list{
  text-align: center;
}
div.center_list > ul {
  display: inline-block;
  text-align: left;
  max-width: 70% /* не обязательно */
}
  • пункт списка 1
  • пункт списка 2 большей длины
  • пункт 3

Минус данного способа в необходимости дополнительной разметки — список должен быть заключен в содержащий контейнер, которому присвоен класс div.center_list.

Горизонтальный список

Иногда, например при использовании списка в качестве меню, нужно расположить элементы списка в строку.

Вариант 1. Сделать элементы списка строчными

/*-- CSS. Строчный вариант --*/
 
li {
  display:inline;
  padding:0 10px;
}

Получаем список такого вида:

  • элемент списка 1
  • элемент списка 2
  • элемент списка 3

Вариант 2. Сделать элементы списка плавающими

/*-- CSS. Плавающий вариант --*/
 
ul {
  list-style: none; /* убираем маркеры, если нужно */
}
li {
  float: left; /* для выравнивания по правому краю - right */
  padding: 0 10px;
}

Получаем такой же список:

  • элемент списка 1
  • элемент списка 2
  • элемент списка 3

На практике, в частности при создании меню на основе списка, чаще используется второй вариант.

Плавающий список

Заголовок не совсем точен; речь идет о списке, обтекающем плавающий элемент.

И опять возвращаемся к плавающим элементам. Два понятия — «плавающий элемент» и «обтекание». Необходимо четко представлять что это такое, что где плавает и что обтекает:

Плавает элемент, у которого свойству float присвоено
значение left или right.

И плавает у соответствующей кромки содержащего блока или прижимается соответствующей кромкой к другому плавающему элементу.

Следующие за ним, обычные блоки никого не обтекают! Они «тупо» не видят плавающий блок….

Подлость происходящего в том и состоит, что обтекает только текст (строчные элементы и элементы с установленным свойством display: inline или display: inline-block!

Когда-то изначально свойство float именно для этого и было придумано!

Все неприятности — от маркеров, которые не являются строчными элементами, и часто происходит следующее:

плавающий блок

  • пункт 1
  • пункт 2

Наверняка, многие тщетно пытались вытащить маркер из под плавающего блока, увеличивая margin и padding

Попытка увеличить правый отступ плавающего элемента выглядела бы более успешно, если бы не параграфы.

Вот как это может выглядеть:

плавающий блок
margin-right: 25px

Параграф до списка

  • пункт 1
  • пункт 2

Параграф после списка

Согласитесь, не очень красиво.

Решение
/*-- CSS --*/
/*-- Cтиль, установленный по умолчанию --*/
ul {
  margin: 0 0 10px 25px;
}
/*-- Переопределяем стили --*/
ul {
  margin: 0 0 10px 10px;
  padding-left: 15px;
  overflow: hidden;
}

В результате получаем:

плавающий блок

Параграф до списка

  • пункт 1
  • пункт 2

Параграф после списка

Особенности применения

Чтобы оставить отступ обычных, не обтекающих списков неизменным, мы уменьшили margin и увеличили padding на одинаковую величину. Отступ маркера от начала текста равен размеру шрифта (14px), и padding должен быть больше этой величины, иначе маркер обрежет.

Мы определили свойства для тега ul. Т.е. для всех списков на сайте. Это не очень хорошо, так-как overfow: hidden, в некоторых случаях, может оказаться не безобидным. Поэтому нужно выбрать один из способов использования данного метода:

1. Если обтекающий список — редкое исключение:

Добавляем конкретным тегам ul класс, например ul.folat_list, и прописываем свойства уже для класса.

2. Обратная ситуация, когда свойство необходимо присвоить только спискам без класса:

Используем следующую конструкцию (только для соврменных браузеров, поддерживающих CSS3)

/*-- CSS --*/
/*-- Для "деклассированных" списков --*/
ul:not([class])  {
  margin: 0 0 10px 10px;
  padding-left: 15px;
  overflow: hidden;
}

Для всех остальных списков, с установленным значением атрибута class, будут применяться стили по умолчанию.

Как стилизовать список UL в одну строку



Я хочу отобразить этот список в одной строке.

  • Список элемент1
  • Список место № 2

Должно быть показано как

*List *List место № 2 место № 2

Какой стиль CSS использовать?

css
Поделиться Источник R.D     10 июня 2009 в 17:01

5 ответов


  • Как стилизовать wp_list_page в wordpress?

    Я пытаюсь стилизовать список выходов wp_list_page, в основном я хотел бы обернуть каждую отдельную страницу в закругленную рамку. Все, что я, кажется, могу сделать, это стилизовать LI и UL на CSS, но я не работаю. Есть идеи, как это сделать? Спасибо

  • Невозможно стилизовать UL, содержащий DIV

    Я пытаюсь стилизовать UL горизонтально, но мой код будет работать только тогда, когда я удалю два встроенных DIV’s . Если я удалю div = thumb и div = button , то список будет выглядеть правильно. У кого-нибудь есть идеи, как я могу это исправить? HTML / PHP: <div class=container-app…


Поделиться rz.     10 июня 2009 в 17:02



29

В современных браузерах вы можете сделать следующее (CSS3 совместимо)

ul
{
  display:flex;  
  list-style:none;
}
<ul>
  <li><a href="">Item1</a></li>
  <li><a href="">Item2</a></li>
  <li><a href="">Item3</a></li>
</ul>

Поделиться davidlbaileysr     14 января 2015 в 03:32



15

HTML код:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

CSS код:

ul.list li{
  width: auto;
  float: left;
}

Поделиться adel aaji     20 января 2010 в 14:26



11

Попробуйте также поэкспериментировать с чем-то подобным:

HTML

 <ul>
   <li>She</li>
   <li>Needs</li>
   <li>More Padding, Captain!</li>
 </ul>

CSS

 .inlineList {
   display: flex;
   flex-direction: row;
   /* Below sets up your display method: flex-start|flex-end|space-between|space-around */
   justify-content: flex-start; 
   /* Below removes bullets and cleans white-space */
   list-style: none;
   padding: 0;
   /* Bonus: forces no word-wrap */
   white-space: nowrap;
 }
 /* Here, I got you started.
 li {
   padding-top: 50px;
   padding-bottom: 50px;
   padding-left: 50px;
   padding-right: 50px;
 }
 */

Я сделал кодовый код, чтобы проиллюстрировать: http://codepen.io/agm1984/pen/mOxaEM

Поделиться agm1984     06 декабря 2016 в 09:28


Поделиться Matee Gojra     18 февраля 2020 в 05:48


  • Dojo dgrid: как стилизовать одну строку?

    Я хочу стилизовать одну строку и избежать определения форматеров для каждой ячейки моей строки. Существует ли эквивалент события onStyleRow для нового виджета Dojo dgrid ? Спасибо.

  • Как стилизовать выпадающий список UL/LI

    У меня есть неупорядоченный список,который я пытаюсь настроить во время выполнения, вызываемый стилем DropKick CSS. Вот изображение того, что я вижу: Я попытался стилизовать его так, что ничего не сделало со стилем: .dk_options ul li a { margin: 0; padding: 0; list-style-type: none; }…


Похожие вопросы:


Список строк в одну строку

Я пытаюсь сделать это упражнение в книге, Определение функции: onSeperateLines :: [String] -> String который принимает список строк и возвращает одну строку, которая при печати показывает строки…


Невозможно стилизовать ul вложенный в другой ul

Несмотря на то, что это простая проблема, я не могу понять, почему я не могу стилизовать вложенный ul. HTML: <div class=footer-left> <ul> <li><a…


Как стилизовать фон маркированных точек в <ul> ?

У меня есть такой список: <ul> <li class=list-item> <span>Label</span> <div class=multi-line-content> multi-<br /> line<br /> content </div>…


Как стилизовать wp_list_page в wordpress?

Я пытаюсь стилизовать список выходов wp_list_page, в основном я хотел бы обернуть каждую отдельную страницу в закругленную рамку. Все, что я, кажется, могу сделать, это стилизовать LI и UL на CSS,…


Невозможно стилизовать UL, содержащий DIV

Я пытаюсь стилизовать UL горизонтально, но мой код будет работать только тогда, когда я удалю два встроенных DIV’s . Если я удалю div = thumb и div = button , то список будет выглядеть правильно. У…


Dojo dgrid: как стилизовать одну строку?

Я хочу стилизовать одну строку и избежать определения форматеров для каждой ячейки моей строки. Существует ли эквивалент события onStyleRow для нового виджета Dojo dgrid ? Спасибо.


Как стилизовать выпадающий список UL/LI

У меня есть неупорядоченный список,который я пытаюсь настроить во время выполнения, вызываемый стилем DropKick CSS. Вот изображение того, что я вижу: Я попытался стилизовать его так, что ничего не…


Android — > ListView-как стилизовать 2 вида текста в одну строку?

у меня есть элемент списка, и я хотел бы стилизовать 2 (или более) текстовых представления в одну строку. ———————————————— | | | TEXT_VIEW_1: FOO TEXT_VIEW_2: BAR | |…


Как сделать список в одну строку в css

Я вставляю в тему пользовательский виджет, и мне нужно сделать список в одну строку, как я могу это сделать? Я все перепробовал


Как стилизовать два разных тега <ul> в HTML и CSS?

У меня есть тег ‘ul’, который уже стилизует что-то другое. Мне нужно создать еще один тег ‘ul’, чтобы стилизовать что-то еще на моей странице HTML. Это первый стиль ul : ul { list-style: none;…

html — Горизонтальный (встроенный) список в HTML / CSS с элементами div

Я пытаюсь создать простой горизонтальный список, где каждый элемент списка является div, и я хочу, чтобы все они располагались рядом друг с другом. Однако, когда я пытаюсь использовать приведенный ниже код, блоки div оказываются на отдельных строках. Вот что у меня есть:

HTML:

<ul>
<li><div>...</div></li>
<li><div>...</div></li>
<li><div>...</div></li>
</ul>

CSS:

#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}

Я попытался дать своим div максимальную ширину и ширину, но это тоже не сработало. Как правило, они отображаются без маркеров на отдельных строках.

Некоторая помощь по исправлению этого была бы очень признательна, спасибо !!

4

Ringo Blancke 9 Дек 2011 в 01:17

4 ответа

Лучший ответ

#navlist li { display:inline }
#navlist div { display:inline }

Сделать <li> встроенным, оставив блок <div> as — ваша проблема.

В качестве альтернативы вам может потребоваться inline-block для <li>, если вы собираетесь контролировать размеры или поля.

Вас также может заинтересовать эта демонстрация: http://phrogz.net/JS/ul2menu/purecss_testsuite. html

Я не уверен, почему у вас есть <div> внутри вашего <li>, но полагаю, у вас есть свои причины.

9

Phrogz 8 Дек 2011 в 21:22

CSS

* {
    margin: 0;
    padding: 0;
}
ul {
    background: #48D;
    height: 35px;
    line-height: 25px;
    width: 300px;
}
li {
    float: left;
    list-style-type: none;
    margin: 5px 0 0 5px;
}
li div {
    background: #6AF;
    padding: 0 5px;
}

HTML

<ul>
    <li><div>Text</div></li>
    <li><div>Text</div></li>
    <li><div>Text</div></li>
</ul>

3

Dissident Rage 8 Дек 2011 в 21:47

Каждый div внутри элементов списка по умолчанию отображается как блок. Также отобразите их встроенными, и это должно сработать.

#navlist div, #navlist li
{
  display: inline;
}
#navlist li
{
  list-style-type: none;
  padding-right: 20px;
}

1

Dennis Traub 8 Дек 2011 в 21:27

Попробуйте float: left; в элементах списка, возможно, что-то вроде этого:

#navlist li
{
float: left;
list-style-type: none;
padding-right: 20px;
}

Кроме того, не забудьте указать высоту ul, потому что элементы будут выходить из потока, а это означает, что ul не будет иметь никакой высоты. Вы также можете использовать clearfix, чтобы исправить это поведение:

.clear:after
{
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clear
{
    display: inline-block;
}

html[xmlns] .clear
{
    display: block;
}

* html .clear
{
    height: 1%;
}

Вы просто добавляете class="clear" в <ul>. Google clearfix css для получения дополнительной информации 🙂

0

allaire 8 Дек 2011 в 21:20

Как создать горизонтальный список с помощью HTML

По умолчанию список HTML

    будет отображаться вертикально с одним элементом списка поверх другого.

    Когда вам нужно создать список, который расширяется по горизонтали, вам нужно добавить стиль display:inline к элементам

  • списка.

    Следующий пример кода:

      <тело>
       

    Добро пожаловать на мой сайт

    <ул>
  • Главная
  • О нас
  • Блог

Будет получен следующий результат:

Горизонтальный HTML-список

Вы также можете удалить стиль отступов по умолчанию 40px для тега

    , чтобы позволить элементам списка занимать всю ширину страницы:

      <тело>
       

    Добро пожаловать на мой сайт

    <ул>
  • Главная
  • О нас
  • Блог

Горизонтальный список обычно используется для создания компонента меню навигации веб-сайта.Если вы хотите создать повторно используемый компонент навигации, вам необходимо отделить CSS от HTML-документа.

Следующий стиль кода CSS преобразует элемент

    в компонент панели навигации:

      ul.nav {
      отступ слева: 0px;
      цвет фона: #3D99CE;
      выравнивание текста: по центру;
    }
    ул.нав > ли {
      отображение: встроенный блок;
      отступ: 10px 20px;
    }
    ul.nav > li: hover {
      цвет фона: #2779BF;
    }
    ул.нав > ли > а {
      белый цвет;
      текстовое оформление: нет;
    }
      

    Чтобы использовать приведенный выше стиль CSS, вам нужно всего лишь добавить класс nav к тегу

    Вывод в формате HTML будет таким, как показано ниже:

    Панель навигации горизонтального списка HTML

    Вот как вы можете создать горизонтальный список с помощью HTML и CSS html — Элементы горизонтального списка — Qaru

    спросил

    Просмотрено 194k раз

    Итак, я попытался создать горизонтальный список для использования на новом веб-сайте, который я разрабатываю.Я попробовал ряд предложений, уже найденных в Интернете, таких как установка «плавающего» влево и т. Д., Но ни одно из них не сработало, когда дело доходит до решения проблемы.

      ul#элементы меню {
          фон: нет;
          высота: 50 пикселей;
          ширина: 100 пикселей;
          маржа: 0;
          заполнение: 0;
        }
        ul#элементы меню li {
          дисплей: встроенный;
          стиль списка: нет;
          поле слева: авто;
          поле справа: авто;
          верх: 0px;
          высота: 50 пикселей;
        }
        ul#menuItems li a {
          семейство шрифтов: Arial, Helvetica, без засечек;
          текстовое оформление: нет;
          вес шрифта: жирнее;
          цвет: #000;
          высота: 50 пикселей;
          ширина: авто;
          дисплей: блок;
          выравнивание текста: по центру;
          высота строки: 50px;
        }  
      <ул>
      
  • Главная
  • Профили ди-джеев

В настоящее время я не уверен, что вызывает эту проблему, как мне ее решить?

БСМП

4,19588 золотых знаков3333 серебряных знака4343 бронзовых знака

спросил 29 марта 2013 в 20:09

1

Я заметил, что многие люди используют этот ответ, поэтому решил немного его обновить.Больше не включает поддержку браузеров, которые сейчас не поддерживаются.

  ул > ли {
    отображение: встроенный блок;
    /* Вы также можете добавить здесь немного полей, чтобы это выглядело красивее */
}  
  <ул>
    
  • какой-то элемент
  • другой элемент
  • Теперь посмотрите на очень простой CSS, благодаря которому это происходит:

      #внешнее меню {
    высота: 84 пикселя;
    фон: url(images/bar-bg.jpg) повтор-х;
    }
    
    .стол {
    дисплей: таблица; /* Разрешить работу центрирования */
    поле: 0 авто;
    }
    
    ul#горизонтальный-список {
    минимальная ширина: 696 пикселей;
    стиль списка: нет;
    отступы сверху: 20px;
    }
    ul#горизонтальный-список li {
    дисплей: встроенный;
    }  

    Это блок таблицы, который выполняет свою работу. Иногда я думаю: «Что бы ни работало». должно быть слоганом для CSS.

    Посмотреть демонстрацию   Скачать файлы

    Как отображать список горизонтально, а не вертикально? — Веб-учебники


    Как отобразить список горизонтально, а не вертикально?

    Автор: Дерон Эрикссон

    Описание: В этом примере CSS показано, как отобразить список горизонтально, а не вертикально.

    Учебник создан с использованием: Windows ХР


    С помощью CSSW можно легко отобразить список горизонтально, а не вертикально, с помощью объявления, устанавливающего для свойства «display» значение «inline». Например, в файле style-test.html ниже у нас есть два селектора классов: «.vertical» и «.horizontal». Селектор «.vertical» устанавливает цвет фона на «желтый», а селектор «.horizontal» устанавливает отображение на «встроенный» и устанавливает цвет фона на «голубой». Ниже у нас есть два ненумерованных списка HTMLW.Элементы

  • первого списка имеют класс «вертикальный», а элементы
  • второго списка имеют класс «горизонтальный».

    style-test.html

    
    
    <голова>
    
    Тест стиля
    <тип стиля="текст/CSS">
    .вертикальный {цвет фона: желтый; }
    .horizontal { дисплей: встроенный; цвет фона: аква; }
    
    
    <тело>
    <ул>
    
  • Вертикальный
  • Вертикаль 2
  • Вертикальная тройка
  • <ул>
  • Горизонтальный 1
  • Горизонтальные два
  • Горизонтальная тройка
  • Если просмотреть style-test.html в браузере типа IE7 видим следующее:

    Первый список отображается вертикально, что является значением по умолчанию. Второй список отображается горизонтально, так как свойство display элементов

  • имеет значение «inline».


    Listutorial: Урок 4 — Горизонтальные списки — Вариант

    Урок 4. Горизонтальные списки — все шаги вместе

    Есть много методов, которые можно использовать для создания горизонтального списка.Главный ингредиент «display: inline», применяемый к элементу «LI».

    КОД CSS
    #navcontainer ul
    {
    margin: 0;
    заполнение: 0;
    тип-стиля-списка: нет;
    выравнивание текста: по центру;
    }

    #navcontainer ul li { display: inline; }

    #navcontainer ul li a
    {
    text-decoration: none;
    заполнение: .2em 1em;
    цвет: #fff;
    цвет фона: #036;
    }

    #navcontainer ul li a:hover
    {
    color: #fff;
    цвет фона: #369;
    }

    HTML-КОД

    Шаг 1 – Составьте базовый список

    Начните с простого неупорядоченного списка.Все элементы списка активны (завернуты в ), что необходимо для работы этого списка. Некоторые правила CSS написаны исключительно для элемента «a» в элементах списка. В этом примере в качестве фиктивной ссылки используется символ «#».

    Шаг 2 — Удалите пули

    Чтобы удалить маркеры списка HTML, установите для параметра «list-style-type» значение «none».

    #navcontainer ul {тип-стиля-списка: нет; }

    Шаг 3. Удалите отступы и поля.

    Стандартные HTML-списки имеют определенный отступ слева.Сумма варьируется в каждом браузере. Некоторые браузеры используют отступы (Mozilla, Netscape, Safari) и другие используют поля (Internet Explorer, Opera) для установки величины отступа.

    Чтобы последовательно удалить этот левый отступ во всех браузерах, установите оба отступы и поля равны «0» для «UL».

    #navcontainer ul
    {
    margin: 0;
    заполнение: 0;
    тип-стиля-списка: нет;
    }

    Шаг 4 — Отображение встроенного

    Чтобы вывести список в одну строку, примените «display: inline;» на «ЛИ».

    КОД CSS
    #navcontainer ul
    {
    margin: 0;
    заполнение: 0;
    тип-стиля-списка: нет;
    }

    #navcontainer ul li { display: inline; }

    Шаг 5 — Удаление текстового оформления

    На этом этапе вы можете удалить подчеркивание текста. Это обычная практика чтобы навигация не имела подчеркивания в качестве их размещения и другой обратной связи механизмы делают их более явно ссылками. Однако вы должны знать, что изменение стандартного поведения гиперссылок (например, подчеркивания) может сбивать с толку некоторые пользователи, которые могут не понимать, что элемент является ссылкой.

    #navcontainer ul
    {
    margin: 0;
    заполнение: 0;
    тип-стиля-списка: нет;
    }

    #navcontainer ul li { display: inline; }
    #navcontainer ul li a { text-decoration: none; }

    Шаг 6. Заполнение элементов списка

    Чтобы превратить каждый элемент списка в поле, нам нужно добавить отступ к элементу «a».

    #navcontainer ul
    {
    margin: 0;
    заполнение: 0;
    тип-стиля-списка: нет;
    }

    #navcontainer ul li { display: inline; }

    #navcontainer ul li a
    {
    text-decoration: none;
    заполнение: .2эм 1эм;
    }

    Шаг 7 — Добавление цвета фона

    На этом этапе можно применить цвет фона и границу. Много комбинации цветов границы и фона, которые можно использовать.

    #navcontainer ul
    {
    margin: 0;
    заполнение: 0;
    тип-стиля-списка: нет;
    }

    #navcontainer ul li { display: inline; }

    #navcontainer ul li a
    {
    text-decoration: none;
    заполнение: .2em 1em;
    цвет: #fff;
    цвет фона: #036;
    }

    Шаг 8 — Добавьте цвет ролловера

    Используйте «a: hover», чтобы установить второй цвет фона в качестве ролловера.Прокрутите список сейчас, и вы увидите, как это работает.

    #navcontainer ul
    {
    margin: 0;
    заполнение: 0;
    тип-стиля-списка: нет;
    }

    #navcontainer ul li { display: inline; }

    #navcontainer ul li a
    {
    text-decoration: none;
    заполнение: .2em 1em;
    цвет: #fff;
    цвет фона: #036;
    }

    #navcontainer ul li a:hover
    {
    color: #fff;
    цвет фона: #369;
    }

    Шаг 9 — Центрируйте список

    #navcontainer ul
    {
    margin: 0;
    заполнение: 0;
    тип-стиля-списка: нет;
    выравнивание текста: по центру;
    }

    #navcontainer ul li { display: inline; }

    #navcontainer ul li a
    {
    text-decoration: none;
    заполнение: .2эм 1эм;
    цвет: #fff;
    цвет фона: #036;
    }

    #navcontainer ul li a:hover
    {
    color: #fff;
    цвет фона: #369;
    }

    Законченный!

    » Вернуться в главное меню

    Другие статьи и презентации Max Design
    , связанные с webstandardsgroup.org

    Отзывчивый горизонтальный список в HTML CSS (очень простые примеры)

    Добро пожаловать в руководство для начинающих о том, как создать адаптивный горизонтальный список в HTML и CSS.Создать список в HTML легко, но есть одна очень неприятная проблема — как упорядоченные, так и неупорядоченные списки в HTML по умолчанию являются вертикальными.

    Один из самых простых способов создать горизонтальный список — установить гибкий контейнер:

      • ПУНКТ
      • ПУНКТ
    • .hlist { display: flex; }
    • .hlist li {тип стиля списка: нет; }

    Это охватывает основы, но давайте рассмотрим еще несколько примеров в этом руководстве — читайте дальше!

    ⓘ Я включил zip-файл со всем исходным кодом примеров в начале этого руководства, поэтому вам не нужно копировать и вставлять все… Или если вы просто хотите сразу погрузиться.

     

    БЫСТРЫЕ ГОРКИ

    СОДЕРЖАНИЕ

    СКАЧАТЬ И ПРИМЕЧАНИЯ

    Во-первых, вот ссылка на скачивание примера кода, как и было обещано.

    БЫСТРЫЕ ЗАМЕЧАНИЯ

    Если вы заметили ошибку, не стесняйтесь комментировать ниже. Я тоже стараюсь отвечать на короткие вопросы, но это один человек против всего мира… Если вам срочно нужны ответы, пожалуйста, посмотрите мой список сайтов, где можно получить помощь по программированию.

    ПРИМЕР КОДА СКАЧАТЬ

    Щелкните здесь, чтобы загрузить исходный код. Я выпустил его под лицензией MIT, так что не стесняйтесь строить на его основе или использовать в своем собственном проекте.

     

    ГОРИЗОНТАЛЬНЫЙ СПИСОК CSS

    Хорошо, теперь давайте рассмотрим примеры создания горизонтального списка с помощью HTML и CSS.

    1) ПРОСТОЙ ГОРИЗОНТАЛЬНЫЙ СПИСОК

    ДЕМО
    • Дож
    • Мякоть
    • Догго
    • Низкочастотный динамик
    • Яппер
    • Йиппер

    HTML

    1-базовый.HTML

      <ул>
      
  • Дож
  • Паппер
  • Догго
  • НЧ-динамик
  • Яппер
  • Яппер
  • Правильно, нам не нужно делать «ничего особенного» в HTML для создания горизонтальных списков — просто используйте обычный

      или
        .

        УС

        1-basic.html

          <стиль>
        /* (A) УДАЛИТЬ ОТМЕТКИ И ПУНКТЫ ПО УМОЛЧАНИЮ */
        .hlist { заполнение: 0; маржа: 0; }
        .hlist li {тип стиля списка: нет; }
         
        /* (B) "ПРЕОБРАЗОВАТЬ" В ГОРИЗОНТАЛЬНЫЙ СПИСОК */
        .hlist { дисплей: гибкий; }
          
        1. Во-первых, мы удаляем отступы по умолчанию
            или
              с отступами : 0 и margin: 0 . Мы также можем удалить маркеры по умолчанию с помощью list-style-type: none .
            1. Как и во введении, display: flex на самом деле все, что нужно, чтобы превратить список в горизонтальную компоновку.

            П.С. Отображение : flex установит макет списка в «гибкое поле CSS». Это важный механизм компоновки в современном CSS, наряду с display: grid . Я оставлю ссылки ниже, если вы хотите узнать больше.

             

            2) ОТВЕТСТВЕННЫЙ ГОРИЗОНТАЛЬНЫЙ СПИСОК

            ДЕМО
            • Дож
            • Мякоть
            • Догго
            • Низкочастотный динамик
            • Яппер
            • Йиппер

            Продолжайте. Измените размер окна и посмотрите, как оно разбивается на 2 элемента подряд на маленьких экранах.

            УС

            2-response.html

              <стиль>
            /* (A) ГОРИЗОНТАЛЬНЫЙ СПИСОК */
            .hlist {
              /* (A1) УДАЛИТЬ ОТСТУПЫ ПО УМОЛЧАНИЮ */
              заполнение: 0;
              маржа: 0;
             
              /* (A2) ГИБКАЯ КОРОБКА */
              дисплей: гибкий;
              ширина: 100%;
             
              /* (A3) КОСМЕТИКА */
              фон: #ffecec;
            }
             
            /* (B) ЭЛЕМЕНТЫ СПИСКА */
            .hlist ли {
              /* (B1) УДАЛИТЬ ПУНКТЫ */
              тип стиля списка: нет;
             
              /* (B2) ЕСЛИ ВЫ ХОТИТЕ СОХРАНИТЬ ПУНКТЫ *
              позиция стиля списка: внутри;
             
              /* (B3) РАЗМЕРЫ */
              box-sizing: граница-коробка;
              отступ: 10 пикселей;
              ширина: 100%; /* автоматический интервал */
            }
             
            /* (C) ОТВЕТСТВЕННАЯ ПОДДЕРЖКА - НА МАЛЕНЬКИХ ЭКРАНАХ */
            Экран @media и (максимальная ширина: 768 пикселей) {
              /* (C1) РАЗРЕШИТЬ ПЕРЕНОС ЭЛЕМЕНТОВ СПИСКА В НОВУЮ СТРОКУ */
              .hlist {гибкая обертка: обернуть; }
             
              /* (C2) 2 ЭЛЕМЕНТА В РЯД */
              .hlist li { ширина: 50%; }
            }
            
              

            Не нужно паниковать. Это просто улучшенная версия простого горизонтального списка с адаптивной поддержкой мобильных устройств.

            1. Это то же самое «убрать отступ по умолчанию» и использовать display: flex , чтобы превратить список в гибкий макет.
            2. Удалить маркеры по умолчанию. Но чтобы равномерно распределить элементы списка, мы добавляем .hlist li { ширина: 100%; }
            3. @media называется «медиа-запросом». По сути, эти «альтернативные стили» будут применяться только на маленьком экране. Короче говоря, на маленьких экранах мы разбиваем по 2 элемента в строке.

             

            ССЫЛКИ И ССЫЛКИ

            ИНФОГРАФИЧЕСКАЯ Шпаргалка

            Горизонтальный список HTML CSS (нажмите, чтобы увеличить)

            ЧТО ДАЛЬШЕ?

            Спасибо за чтение, и мы подошли к концу этого руководства.Я надеюсь, что это помогло вам с вашим проектом, и если вы хотите поделиться чем-либо с этим руководством, пожалуйста, не стесняйтесь комментировать ниже. Удачи и счастливого кодирования!

            горизонтальных списков CSS | НеиспользуемыйCSS

            Списки HTML, представленные тегом

              с дочерними тегами
            • , по умолчанию являются вертикальными и маркированными. Для пользовательского стиля нам нужно применить специальные свойства CSS.

              Например, давайте построим горизонтальный список.

              Давайте начнем с написания простого ненумерованного списка.

               <ул>
              
            • Главная
            • Проекты
            • О нас
            • Связаться

            Так будет выглядеть список

            • Дом
            • Проекты
            • О нас
            • Связаться с

            Допустим, мы хотим придать приведенному выше списку что-то похожее на это

            • Дом
            • Проекты
            • О нас
            • Связаться с

            Так как же нам этого добиться? Давайте рассмотрим процесс шаг за шагом.
            Наше первое наблюдение заключается в том, что в конечном итоге нам не нужен стиль пули. Стиль элементов списка управляется свойством list-style. Давайте удалим их, установив значение none.

             <ул>
            
          • Главная
          • Проекты
          • О нас
          • Связаться
          ul.horizontal-список { стиль списка: нет; }
          • Дом
          • Проекты
          • О нас
          • Связаться с

          Пули закончились, но наш список по-прежнему вертикальный.Это связано с тем, что элементы списка по умолчанию являются элементами с отображением блоков и, следовательно, занимают все пространство по горизонтали. Давайте настроим их на отображение встроенных блоков .

           ul.horizontal-list li {
            отображение: встроенный блок;
          } 
          • Дом
          • Проекты
          • О нас
          • Связаться с

          Итак, у нас есть горизонтальный список.

          Нам нужно добавить вертикальную черту справа от каждого элемента списка, но не от последнего.

           ul.horizontal-list li:not(:last-child) {
          граница справа: 1 пиксель сплошной черный;
          } 
          • Дом
          • Проекты
          • О нас
          • Связаться с

          Давайте добавим отступы к каждому элементу списка.

           ul.horizontal-list li {
            // остальные стили сверху
            заполнение: 0 0.5rem;
          } 
          • Дом
          • Проекты
          • О нас
          • Связаться с

          Длина текста в каждом элементе списка различается.Чтобы иметь единый внешний вид, мы зададим постоянную минимальную ширину всем элементам и выровняем текст по центру.

           ul.horizontal-list li {
            // остальные стили сверху
            мин-ширина: 12рем;
          выравнивание текста: по центру;
          } 
          • Дом
          • Проекты
          • О нас
          • Связаться с

          Теперь у вас есть готовый список. Все, что нам нужно сделать, это установить цвет фона и текста в соответствии с темой вашего сайта/приложения.

          • Дом
          • Проекты
          • О нас
          • Связаться с
           

          Стили списка по умолчанию

          <ул>
        2. Главная
        3. Проекты
        4. О нас
        5. Связаться

    Горизонтальный список

    <ул>
  • Главная
  • Проекты
  • О нас
  • Связаться
  •  body { семейство шрифтов: без засечек; }
    
    ли: наведите {
      оформление текста: подчеркивание;
    }
    
    ул.горизонтальный список {
      стиль списка: нет;
      цвет фона: #48abe0;
      белый цвет;
      отображение: встроенный блок;
      набивка: 1рем 2рем;
      поле-верх: 1re;
    }
    
    ul.horizontal-list li {
      отображение: встроенный блок;
      заполнение: 0 0.5rem;
      мин-ширина: 7rem;
      выравнивание текста: по центру;
      курсор: указатель;
    }
    
    ul.horizontal-list li: not (: last-child) {
      граница справа: 1 пиксель сплошной белый;
    }
    
     

    Варианты использования

    Горизонтальные списки — одни из наиболее часто используемых объектов в веб-дизайне.Возможно, вы общаетесь с ними ежедневно. Они чаще всего встречаются в навигационных панелях, заголовках таблиц, списках вкладок и т. д.

    Давайте посмотрим на другие реализации.

    Вот аналогичный список

    См. Простой горизонтальный список Pen (CSS) Джереми Кэриса (@jeremycaris) на CodePen.

    Группа горизонтального списка

    См. группу списка Pen Horizontal с Bootstrap 3 от Lazy Jones (@lazy) на CodePen.

    Заголовок таблицы в стиле Excel

    См. меню горизонтального списка Pen css от CSS4HTML (@CSS4HTML) на CodePen.

    Реализация в виде панели навигации

    См. горизонтальный список пера — float: оставил Джейсон Стюарт (@jastew) на CodePen.

    Заключение

    Несмотря на то, что неупорядоченные списки изначально являются вертикальными, веб-разработчикам регулярно приходится реализовывать горизонтальные списки. Внедрение горизонтальных списков благодаря гибкости CSS не является сложной задачей. Установив для отображения встроенные параметры, мы можем легко получить горизонтально расположенную группу элементов списка.

    .

    Добавить комментарий

    Ваш адрес email не будет опубликован.