This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Show hidden characters
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}
nav li {
display: inline-block;
text-transform: uppercase;
}
. main-menu {
text-align: center;
font-size: em(15)
}
.main-menu > ul > li > a {
display: inline-block;
padding: 10px 18px;
color: #7e91a4;
text-decoration: none;
}
.main-menu > ul > li > a:hover {
color: #414e5b;
}
. main-menu > ul > li.active a {
color: #414e5b;
text-decoration: underline;
}
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Show hidden characters
<nav>
<ul>
<li><a href=»#»>Главная</a></li>
<li><a href=»#»>Монтаж</a></li>
<li><a href=»#»>Проектирование</a></li>
<li><a href=»#»>Оборудование</a></li>
<li><a href=»#»>Контакты</a></li>
</ul>
</nav>
Как сделать так, чтобы список HTML отображался горизонтально, а не вертикально, используя только CSS?
Задавать вопрос
спросил
Изменено
1 год, 6 месяцев назад
Просмотрено
174 тыс. раз
Мне это нужно, потому что я хочу, чтобы меню (созданное из HTML-списка) отображалось горизонтально.
Я предпочитаю не использовать абсолютное позиционирование, так как оно может стать беспорядочным, когда я начну изменять макет страницы.
Я также хотел бы убрать отступы подсписков. Является ли это возможным?
#menu ul {
стиль списка: нет;
маржа: 0;
заполнение: 0;
дисплей: встроенный гибкий
}
<дел>
<ул>
1 пункт меню
2 пункт меню
3 пункта меню
Использование дисплея : встроенный блок
#menu ul {
стиль списка: нет;
маржа: 0;
заполнение: 0;
}
#меню ли {
отображение: встроенный блок;
}
<дел>
<ул>
1 пункт меню
2 пункт меню
3 пункта меню
довольно просто:
ul. yourlist li { float:left; }
или
ul.yourlist li { display:inline; }
0
Вы можете напрямую использовать встроенный стиль примерно так:
А
Б
С
Д
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя адрес электронной почты и пароль
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Группа списка · Bootstrap
Группы списков — это гибкий и мощный компонент для отображения серии содержимого. Модифицируйте и расширяйте их для поддержки практически любого содержимого внутри.
Базовый пример
Самая простая группа списков — это неупорядоченный список с элементами списка и соответствующими классами. Разработайте его с помощью следующих опций или с помощью собственного CSS по мере необходимости.
Крас Хусто Одио
Dapibus ac facilisis в
Морби Лео Рисус
Porta ac consectetur ac
Вестибюль эроса
<ул>
Крас Хусто Одио
Dapibus ac facilisis в
Морби лео рисус
Конструкция порта переменного тока
Вестибюль в эросе
Активные элементы
Добавьте .active к .list-group-item , чтобы указать текущий активный выбор.
Крас Хусто Одио
Dapibus ac facilisis в
Морби лео рисус
Porta ac consectetur ac
Вестибюль эроса
<ул>
Крас Хусто Одио
Dapibus ac facilisis в
Морби лео рисус
Конструкция порта переменного тока
Вестибюль в эросе
Отключенные элементы
Добавить .
disabled к .list-group-item , чтобы выглядело отключенным. Обратите внимание, что некоторые элементы с .disabled также потребуют пользовательского JavaScript, чтобы полностью отключить события кликов (например, ссылки).
Использование цвета для добавления значения обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана. Убедитесь, что информация, обозначенная цветом, либо очевидна из самого содержимого (например, видимый текст), либо включена с помощью альтернативных средств, таких как дополнительный текст, скрытый с помощью класса .sr-only .
С значками
Добавьте значки к любому элементу группы списка, чтобы показать количество непрочитанных сообщений, активность и многое другое с помощью некоторых утилит.
Крас Хусто Одио
14
Dapibus ac facilis в
2
Морби Лео Рисус
1
<ул>
Крас Хусто Одио
14
Dapibus ac facilis в
2
Морби Лео Рисус
1
Пользовательский контент
Добавьте практически любой HTML-код внутри, даже для групп связанных списков, таких как приведенный ниже, с помощью утилит flexbox.
Заголовок элемента списка
3 дня назад
Donec id elit non mi porta gravida at eget metus. Меценат sed diam eget risus varius blandit.
Donec id elit non mi porta.
Заголовок элемента списка
3 дня назад
Donec id elit non mi porta gravida at eget metus. Меценат sed diam eget risus varius blandit.
Donec id elit non mi porta.
Заголовок группы элементов списка
3 дня назад
Donec id elit non mi porta gravida at eget metus. Меценат sed diam eget risus varius blandit.
Donec id elit non mi porta.
<дел>
<а href="#">
<дел>
Заголовок элемента группы списка
3 дня назад
Donec id elit non mi porta gravida at eget metus. Меценат sed diam eget risus varius blandit.
Donec id elit non mi porta.
<а href="#">
<дел>
Заголовок элемента группы списка
3 дня назад
Donec id elit non mi porta gravida at eget metus. Меценат sed diam eget risus varius blandit.
Donec id elit non mi porta.
<а href="#">
<дел>
Заголовок элемента группы списка
3 дня назад
Donec id elit non mi porta gravida at eget metus. Меценат sed diam eget risus varius blandit.
Donec id elit non mi porta.
Поведение JavaScript
Используйте подключаемый модуль JavaScript для вкладок — включите его отдельно или через скомпилированный файл bootstrap.js — чтобы расширить нашу группу списков для создания вкладок с локальным контентом.
Главная
Профиль
Сообщения
Настройки
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 cupidat nisi enim eu nostrud do aliquip veniam minim.
Cupidatat quis ad sint exceptionur Laborum in esse qui. Et excludeur 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 Anima 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 cupidat cupidat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure Labore voluptate irure. Ipsum ID Lorem сидеть sint voluptate est pariatur eu ad cupidatat и др 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 cupidat 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.
Вы можете активировать групповую навигацию списка без написания кода JavaScript, просто указав data-toggle="list" или в элементе. Используйте эти атрибуты данных для .list-group-item .
Включить элемент списка с вкладками через JavaScript (каждый элемент списка необходимо активировать отдельно):
$('#myList a').on('click', function (e) {
e.preventDefault()
$(это).вкладка('показать')
})
Вы можете активировать отдельный элемент списка несколькими способами:
$('#myList a[href="#profile"]').tab('show') // Выбрать вкладку по имени
$('#myList a:first-child').tab('show') // Выбрать первую вкладку
$('#myList a:last-child').tab('show') // Выбрать последнюю вкладку
$('#myList a:nth-child(3)').tab('show') // Выбрать третью вкладку
Эффект затухания
Чтобы сделать панель вкладок плавной, добавьте .fade к каждой .tab-pane . Первая панель вкладок также должна иметь .show , чтобы сделать начальное содержимое видимым.
<дел>
...
. ..
...
...
Методы
$(). вкладка
Активирует элемент списка и контейнер содержимого. Вкладка должна иметь либо data-target или href , нацеленный на узел контейнера в DOM.
Выбирает данный элемент списка и показывает связанную с ним панель. Любой другой элемент списка, который был выбран ранее, становится невыбранным, а связанная с ним панель скрывается. Возвращает вызывающему объекту до фактического отображения панели вкладок (например, до возникновения события visible.bs.tab ).
$('#someListItem').tab('show')
События
При отображении новой вкладки события запускаются в следующем порядке:
hide.bs.tab (на текущей активной вкладке)
show.bs.tab (на вкладке для отображения)
hidden.bs.tab (на предыдущей активной вкладке, та же, что и для события hide.bs.tab )
visible.bs.tab (на новоактивной только что показанной вкладке, такой же, как и для события show.bs.tab )
Если ни одна вкладка уже не была активной, события hide.bs.tab и hidden.bs.tab не будут запущены.
Тип события
Описание
показать. bs.tab
Это событие возникает при показе вкладки, но до того, как будет показана новая вкладка. Используйте event.target и event.relatedTarget , чтобы выбрать активную вкладку и предыдущую активную вкладку (если она доступна) соответственно.
показана.bs.tab
Это событие возникает при показе вкладки после того, как вкладка была показана. Используйте event.target и event.relatedTarget для таргетинга на активную вкладку и предыдущую активную вкладку (если она доступна) соответственно.
скрыть.bs.tab
Это событие возникает, когда должна быть показана новая вкладка (и, следовательно, предыдущая активная вкладка должна быть скрыта). Используйте event.target и event.relatedTarget , чтобы настроить таргетинг на текущую активную вкладку и новую вкладку, которая скоро станет активной, соответственно.
main-menu {
main-menu > ul > li.active a {
раз
yourlist li { float:left; }
Модифицируйте и расширяйте их для поддержки практически любого содержимого внутри.
list-group-flush 
Убедитесь, что информация, обозначенная цветом, либо очевидна из самого содержимого (например, видимый текст), либо включена с помощью альтернативных средств, таких как дополнительный текст, скрытый с помощью класса 
Меценат sed diam eget risus varius blandit.
Меценат sed diam eget risus varius blandit.
Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidat nisi enim eu nostrud do aliquip veniam minim.
Consectetur et fugiat anim do eiusmod aliquip nulla Laborum elit adipisicing pariatur cillum.
..
..
..
Возвращает вызывающему объекту до фактического отображения панели вкладок (например, до возникновения события 
bs.tab