Как расположить список в строчку css

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

Верстать списки в HTML можно и горизонтальные, и вертикальные. Нас интересует создание горизонтального списка. Мы помним, что маркированные списки в HTML задаются парными тегами «ul» и «li», а нумерованные списки тегами «ol» и «li». Как же сделать горизонтальный список в HTML, чтобы все пункты отображались в одну строку?

Чтобы список был горизонтальные и перечисление данных в списке имело горизонтальный вид следует к тегу «ul» добавить правило в css list-style:none; (это правило убирает маркировку списка, поэтому прописывать его нужно по мере необходимости) а для тега «li» display: block; и float: left; тоже получится выровнять список в строку и без отступов между элементами. Например:

ul.menu < border:0; background:#fff; border:solid 0px #eee; list-style:none; /* Убирает маркировку списка */ >.module_content ul.menu < border:0; >ul.menu li

Есть ещё один способ, который я нашла, но у меня он не заработал, к сожалению. Нужно к тегу «li» добавить в css правило display: inline; Например:

ul li < display: inline; /* Отображать как строчный элемент */ >

Ну вот, в принципе, и всё. Горизонтальный список готов! 🙂

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

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

Решение

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

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

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

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

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

Все значения свойства display

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

Но после ухода IE7-, стало возможным использовать и другие значения тоже. Рассмотрим здесь весь список.

Значение none

Самое простое значение. Элемент не показывается, вообще. Как будто его и нет.

 
Невидимый div ( 
Я - невидим!
 ) Стоит внутри скобок
 

Значение block

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

Это значение display многие элементы имеют по умолчанию: , заголовок , параграф

.

 
Первый
 
Второй
 

Блоки прилегают друг к другу вплотную, если у них нет margin .

Значение inline

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

Например, инлайновые элементы по умолчанию: , .

Если вы присмотритесь внимательно к примеру выше, то увидите, что между внутренними и есть пробел. Это потому, что он есть в HTML.

Если расположить элементы вплотную – его не будет:

Содержимое инлайн-элемента может переноситься на другую строку.

При этом каждая строка в смысле отображения является отдельным прямоугольником («line box»). Так что инлайн-элемент состоит из объединения прямоугольников, но в целом, в отличие от блока, прямоугольником не является.

Это проявляется, например, при назначении фона.

Например, три прямоугольника подряд:

 
. Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля .
 

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

 
Инлайн 
Блок
 Инлайн 

Значение inline-block

Это значение – означает элемент, который продолжает находиться в строке ( inline ), но при этом может иметь важные свойства блока.

Как и инлайн-элемент:

• Располагается в строке.
• Размер устанавливается по содержимому.

Во всём остальном – это блок, то есть:

• Элемент всегда прямоугольный.
• Работают свойства width/height .

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

Свойство vertical-align позволяет выровнять такие элементы внутри внешнего блока:

Как и в случае с инлайн-элементами, пробелы между блоками появляются из-за пробелов в HTML. Если элементы списка идут вплотную, например, генерируются в JavaScript – их не будет.

Значения table-*

Современные браузеры (IE8+) позволяют описывать таблицу любыми элементами, если поставить им соответствующие значения display .

Для таблицы целиком table , для строки – table-row , для ячейки – table-cell и т.д.

 
 Имя: Фамилия: 

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

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

table < display: table >tr < display: table-row >thead < display: table-header-group >tbody < display: table-row-group >tfoot < display: table-footer-group >col < display: table-column >colgroup < display: table-column-group >td, th < display: table-cell >caption

Очень подробно об алгоритмах вычисления размеров и отображении таблиц рассказывает стандарт CSS 2.1 – Tables.

Вертикальное центрирование с table-cell

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

Это можно использовать для центрирования:

 div 
Элемент
С неизвестной
Высотой
 

CSS не требует, чтобы вокруг table-cell была структура таблицы: table-row и т.п. Может быть просто такой одинокий DIV , это допустимо.

При этом он ведёт себя как ячейка TD , то есть подстраивается под размер содержимого и умеет вертикально центрировать его при помощи vertical-align .

Значения list-item, run-in и flex

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

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

Пункт 1

Если после run-in идёт block , то run-in становится его первым инлайн-элементом, то есть отображается в начале block .

Если ваш браузер поддерживает это значение, то в примере ниже h3 , благодаря display:run-in , окажется визуально внутри div :

Про пчёл.
 
Пчёлы - отличные создания, они делают мёд.

Если же вы видите две строки, то ваш браузер НЕ поддерживает run-in .

Вот, для примера, правильный вариант отображения run-in , оформленный другим кодом:

 
Про пчёл.
Пчёлы - отличные создания, они делают мёд.
 

Если этот вариант отличается от того, что вы видите выше – ваш браузер не поддерживает run-in . На момент написания этой статьи только IE поддерживал display:run-in .

Flexbox позволяет удобно управлять дочерними и родительскими элементами на странице, располагая их в необходимом порядке. Официальная спецификация находится здесь: CSS Flexible Box Layout Module

Группа списков

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

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

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

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

 class="list-group">  class="list-group-item">Cras justo odio  class="list-group-item">Dapibus ac facilisis in  class="list-group-item">Morbi leo risus  class="list-group-item">Porta ac consectetur ac  class="list-group-item">Vestibulum at eros 

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

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

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

 class="list-group">  class="list-group-item active">Cras justo odio  class="list-group-item">Dapibus ac facilisis in  class="list-group-item">Morbi leo risus  class="list-group-item">Porta ac consectetur ac  class="list-group-item">Vestibulum at eros 

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

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

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

 class="list-group">  class="list-group-item disabled">Cras justo odio  class="list-group-item">Dapibus ac facilisis in  class="list-group-item">Morbi leo risus  class="list-group-item">Porta ac consectetur ac  class="list-group-item">Vestibulum at eros 

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

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

 class="list-group">  href="#" class="list-group-item list-group-item-action active"> Cras justo odio  href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in  href="#" class="list-group-item list-group-item-action">Morbi leo risus  href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac  href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros 

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

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

 class="list-group">  type="button" class="list-group-item list-group-item-action active"> Cras justo odio  type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in  type="button" class="list-group-item list-group-item-action">Morbi leo risus  type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac  type="button" class="list-group-item list-group-item-action" disabled>Vestibulum at eros 

Смывание

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

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

 class="list-group list-group-flush">  class="list-group-item">Cras justo odio  class="list-group-item">Dapibus ac facilisis in  class="list-group-item">Morbi leo risus  class="list-group-item">Porta ac consectetur ac  class="list-group-item">Vestibulum at eros 

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

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

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

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus

 class="list-group list-group-horizontal">  class="list-group-item">Cras justo odio  class="list-group-item">Dapibus ac facilisis in  class="list-group-item">Morbi leo risus 

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus

 class="list-group list-group-horizontal-sm">  class="list-group-item">Cras justo odio  class="list-group-item">Dapibus ac facilisis in  class="list-group-item">Morbi leo risus 

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus

 class="list-group list-group-horizontal-md">  class="list-group-item">Cras justo odio  class="list-group-item">Dapibus ac facilisis in  class="list-group-item">Morbi leo risus 

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus

 class="list-group list-group-horizontal-lg">  class="list-group-item">Cras justo odio  class="list-group-item">Dapibus ac facilisis in  class="list-group-item">Morbi leo risus 

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus

 class="list-group list-group-horizontal-xl">  class="list-group-item">Cras justo odio  class="list-group-item">Dapibus ac facilisis in  class="list-group-item">Morbi leo risus 

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

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

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

 class="list-group">  class="list-group-item">Dapibus ac facilisis in  class="list-group-item list-group-item-primary">Элемент основной группы списков  class="list-group-item list-group-item-secondary">Дополнительный элемент группы списков  class="list-group-item list-group-item-success">Элемент группы списка успешных действий  class="list-group-item list-group-item-danger">Элемент группы списка опасности  class="list-group-item list-group-item-warning">Элемент группы списка предупреждений  class="list-group-item list-group-item-info">Элемент группы списка информации  class="list-group-item list-group-item-light">Элемент группы с легким списком  class="list-group-item list-group-item-dark">Элемент группы темных списков 

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

 class="list-group">  href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in  href="#" class="list-group-item list-group-item-action list-group-item-primary">Элемент основной группы списков  href="#" class="list-group-item list-group-item-action list-group-item-secondary">Дополнительный элемент группы списков  href="#" class="list-group-item list-group-item-action list-group-item-success">Элемент группы списка успешных действий  href="#" class="list-group-item list-group-item-action list-group-item-danger">Элемент группы списка опасности  href="#" class="list-group-item list-group-item-action list-group-item-warning">Элемент группы списка предупреждений  href="#" class="list-group-item list-group-item-action list-group-item-info">Элемент группы списка информации  href="#" class="list-group-item list-group-item-action list-group-item-light">Элемент группы с легким списком  href="#" class="list-group-item list-group-item-action list-group-item-dark">Элемент группы темных списков 

Использование вспомогательных технологий

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

Со значками

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

• Cras justo odio 14
• Dapibus ac facilisis in 2
• Morbi leo risus 1

 class="list-group">  class="list-group-item d-flex justify-content-between align-items-center"> Cras justo odio  class="badge badge-primary badge-pill">14   class="list-group-item d-flex justify-content-between align-items-center"> Dapibus ac facilisis in  class="badge badge-primary badge-pill">2   class="list-group-item d-flex justify-content-between align-items-center"> Morbi leo risus  class="badge badge-primary badge-pill">1  

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

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

List group item heading

3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

List group item heading

3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

List group item heading

3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

 class="list-group">  href="#" class="list-group-item list-group-item-action active">  class="d-flex w-100 justify-content-between">  class="mb-1">List group item heading 3 days ago   class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta.   href="#" class="list-group-item list-group-item-action">  class="d-flex w-100 justify-content-between">  class="mb-1">List group item heading  class="text-muted">3 days ago   class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.  class="text-muted">Donec id elit non mi porta.   href="#" class="list-group-item list-group-item-action">  class="d-flex w-100 justify-content-between">  class="mb-1">List group item heading  class="text-muted">3 days ago   class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.  class="text-muted">Donec id elit non mi porta.  

Поведение 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.

 class="row">  class="col-4">  class="list-group" id="list-tab" role="tablist">  class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home  class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile  class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages  class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings    class="col-8">  class="tab-content" id="nav-tabContent">  class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">.  class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">.  class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">.  class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">.   

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

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

  class="list-group" id="myList" role="tablist">  class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home  class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile  class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages  class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings   class="tab-content">  class="tab-pane active" id="home" role="tabpanel">.  class="tab-pane" id="profile" role="tabpanel">.  class="tab-pane" id="messages" role="tabpanel">.  class="tab-pane" id="settings" role="tabpanel">. 

Через 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 , чтобы сделать начальное содержимое видимым.

 class="tab-content">  class="tab-pane fade show active" id="home" role="tabpanel">.  class="tab-pane fade" id="profile" role="tabpanel">.  class="tab-pane fade" id="messages" role="tabpanel">.  class="tab-pane fade" id="settings" role="tabpanel">. 

Методы

$().tab

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

 class="list-group" id="myList" role="tablist">  class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home  class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile  class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages  class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings   class="tab-content">  class="tab-pane active" id="home" role="tabpanel">.  class="tab-pane" id="profile" role="tabpanel">.  class="tab-pane" id="messages" role="tabpanel">.  class="tab-pane" id="settings" role="tabpanel">.  $(function ()  $('#myList a:last-child').tab('show') >) 

.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 >)