Как сделать список по горизонтали css
Перейти к содержимому

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

  • автор:

HTML и CSS списки по горизонтали

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

HTML списки | Пример:

CSS списки | Пример ниже:

Атрибуты и значения

  • Селектор * – определяет все элементы документа. В данном случае установлен шрифт.
  • padding:0 – отменяет внутренние поля.
  • margin:0 auto – определяет центрирование блока.
  • list-style:none – определяет отсутствие маркеров списка.
  • margin:0 – отменяет внешние поля блока
  • display:inline – определяет горизонтальное положение объектов.
  • border-left: – определяет свойства левой границы.
  • padding-top: – определяет размер верхнего внутреннего поля.
  • text-decoration:none – отменяет подчеркивание текста.
  • float:left – определяет обтекание слева (подробнее в одном из следующих уроков).
  • a:link, a:active, a:visited заменены селектором a , то есть все три псевдоэлемента имеют одинаковые свойства.

Ширина блока подсчитана так: 762 = 125 * 6 + 2 * 6 , где 125 * 6 → длина 6-ти ссылок, 2 * 6 → общая ширина атрибута border-left .

Автор проекта — Вася Митин | Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018

CSS таблицы CSS списки по горизонтали CSS списки и изображения

© 2009 — 2023 | При использовании материала, ссылайтесь на мой сайт!
По всем вопросам обращайтесь: go@ab-w.net | Горизонтальные списки CSS? – Не вопрос!

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

Как из вертикального списка: Вертикальный список Сделать, чтобы он был горизонтальный? Вот кусочек кода: Кусочек кода

Отслеживать

задан 22 дек 2017 в 9:50

95 1 1 серебряный знак 7 7 бронзовых знаков

Александр, не много не понял о чем вы? 🙂

22 дек 2017 в 9:55

текстовую информацию лучше прилагать в виде текста: а) читать легче; б) можно копировать; в) поиск работает. исправить текст вопроса можно, нажав править ниже текста вопроса

Создание горизонтального списка в CSS: inline и маргины

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

Современные методы: Flexbox

Скопировать код

Отказ от использования float

Ранее для горизонтального выравнивания элементов часто использовалось свойство float: left; . Однако этот метод может вызывать проблемы с версткой и требует дополнительных действий для сброса обтекания. Теперь доступны более элегантные решения, например, flex или inline-block .

Скопировать код

/* Прощай, float! Нам ты больше не понадобишься. */ li

Поддержка старых браузеров

Если ваши пользователи используют устаревшие браузеры, такие как старые версии Internet Explorer, убедитесь в совместимости и при необходимости используйте альтернативные решения или префиксы.

Визуализация

Вообразите HTML и CSS как захватывающее путешествие в мире творчества. Можно представить каждый элемент списка как вагон поезда, которые мы стремимся расположить горизонтально, используя свойство display: flex; .

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

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

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

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

html> head> style> ul.spisok_ver1< margin: 3px; padding: 3px; > ul.spisok_ver1 li< display: inline; margin-right: 3px; border: 1px solid #555; padding: 5px; > /style> /head> body> ul class css">spisok_ver1"> li>Элемент #1/li> li>Элемент #2/li> li>Элемент #3/li> li>Элемент #4/li> /ul> /body> /html>

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

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

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

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

html> head> style> ul.primer_menu< margin: 3px; padding: 3px; > ul.primer_menu li < margin: 0; padding: 0; text-align: center; background: #4876FF; display: inline-block; font-size: 18px; > ul.primer_menu li a< color: white; display: block; padding: 7px 20px; text-decoration: none; > ul.primer_menu li:hover < background: #B22222; color: #fff; > /style> /head> body> ul class css">primer_menu"> li>a href value">index.html">Главная/a>/li> li>a href value">/production/">Каталог/a>/li> li>a href value">/otzyvy/">Отзывы/a>/li> li>a href value">/about/">О компании/a>/li> li>a href value">/contact/">Контакты/a>/li> /ul> /body> /html>

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

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

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

html> head> style> ul.spisok_ver3< overflow: hidden; > ul.spisok_ver3 li< border: 1px solid #000; display: block; float: left; padding: 3px; margin-left: 5px; > /style> /head> body> ul class css">spisok_ver3"> li>Элемент #1/li> li>Элемент #2/li> li>Элемент #3/li> li>Элемент #4/li> /ul> /body> /html>

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

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

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

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