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

Полезные советы по CSS и HTML

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Горизонтальный список</title>
<style type="text/css">
ul.hr <
margin: 0px; /* Обнуляем значение отступов */
padding: 0px; /* Обнуляем значение полей */
>
ul.hr li <
display: inline; /* Отображать как встроенный элемент */
margin-right: 5px; /* Отступ слева */
border: 1px solid #000; /* Рамка вокруг текста */
padding: 3px; /* Поля вокруг текста */
>
</style>
</head>
<body>
<ul /> <li>Мчади</li>
<li>Када на мацони</li>
<li>Пахлава</li>
<li>Кчуч</li>
<li>Лилибдж</li>
</ul>
</body>
</html>

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

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

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

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

Весь вечер бьюсь и не могу сделать горизонтальный МАРКИРОВАНЫЙ список. Как только список становится горизонтальным, маркеры пропадают, за исключением использования способа с float:left, но используя его, появляются какие то кривые отступы, которые не могу убрать. Вобщем, кто знает, просто дайте готовый код пожалуйста, а дальше сам разберусь.

Вот пример того, что мне нужно:

< Категория < Категория 2 уровня < Категория 3 уровня < Категория 4 уровня

< — это маркер, у вас в примере пускай он будет любой, лишь бы был. Отступы, самое главное, пускай они будут нулевыми везде, как в моем примере

Маркированный список
Доброго всем времени суток! Делаю aside из маркированного списка,пункты в нем будут постепенно.

Маркированный список
Как сделать цвет маркера и цвет заголовков разными например: &lt;ul&gt; .

Маркированный список с изображениями
Создать новый html-документ. Используется маркированный список (&lt;ul&gt;..&lt;/ul&gt;), в качестве маркера.

Лучший ответСообщение было отмечено Kapo как решение

Стилизованные списки List Group для сайта

Александр Мальцев

Выше приведенный пример будет выглядеть примерно так:

  • Элемент маркированного списка
  • Элемент маркированного списка
  • Элемент маркированного списка
  • Элемент 2 уровня
  • Элемент 2 уровня
  • Элемент 2 уровня

Создание нумерованного списка

Выше приведенный пример будет выглядеть примерно так:

  1. Элемент нумерованного списка
  2. Элемент нумерованного списка
  3. Элемент нумерованного списка
  4. Элемент нумерованного списка
  5. Элемент нумерованного списка

Создания нумерованных и маркированных списков без использования стилей

Для создания нумерованных и маркированных списков без использования стилей, Вам необходимо применить класс .list-unstyled к соответствующим тегам <ul> или <ol>.

Выше приведенный пример будет выглядеть примерно так:

  • Главная
  • Тарифы
  • Свой*
  • Turbo Fresh

Примечание: Класс .list-unstyled удаляет свойство CSS list-style и отступы слева (padding) только для элементов, которые расположены внутри контейнеров <ul> или <ol>.

Размещения нумерованных и маркированных списков в одну строку

Если вы хотите создать горизонтальное меню с использованием нумерованных или маркированных списков, то вам необходимо разместить все элементы списка в одну строку. Вы можете сделать это, просто применив класс Bootstrap .list-inline к соответствующим тегам <ul> или <ol>. Класс .list-inline также добавляет небольшие отступы слева и справа (5px по умолчанию) ко всем элементам списка.

Вышеприведенный пример будет выглядеть примерно так:

Bootstrap 3 - Расположение маркированного списка в одну строку

Создание горизонтальных списков определений

Термины и связанные с ними описания могут быть также размещены в одну строку с использованием класса Bootstrap .dl-horizontal. Термины в горизонтальных списках определений будут обрезаны, если они слишком длинные, чтобы поместиться в левую колонку (160px по умолчанию). Однако, для устройств с маленьким экраном (ширина меньше 768px) списки определений изменяют своё отображение по умолчанию на вертикальное.

Вышеприведенный пример будет выглядеть примерно так:

Bootstrap 3 - Горизонтальный список определений

Примечание: Обрезанная часть терминов в горизонтальных списках определений, будет замена на многоточие (. ), используя CSS свойство text-overflow.

Создание групповых списков с помощью Bootstrap

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

Выше приведенный пример будет выглядеть примерно так:

  • Избранное
  • Пользователи
  • Статьи
  • Изображения

Затем, Вы можете, добавить гиперссылки к элементам группового списка. Для этого замените тег <li> на тег <a>, а в качестве элемента контейнера используйте тег <div> вместо <ul>. Вы также можете добавить иконки и значки к групповому списку, что бы сделать его более изящным. Компонент значков будет автоматически расположен справа.

Bootstrap 3 - Добавление гиперссылок к элементам группового списка

Совет: Вы можете использовать компонент групповых списков Bootstrap для создания навигации в боковой панели. Например, отображая список продуктов или категорий на Вашем веб-сайте.

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

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *