• Как заработать на сайте
  • Как заработать в интернете
  • Инвестиции в интернете
  • Партнерские программы
  • Рейтинг парт. программ
  • SEO продвижение
  • Вопросы и ответы
  • Термины оптимизатора
  • HTML-уроки
  • Интернет
  • Мои услуги
  • Реклама на сайте
  • Обратная связь
Стоимость баннера за месяц: 30$ (подробности)
Главная → HTML уроки и советы → Как разместить элементы списка горизонтально

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

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

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

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

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


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

Пример 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="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="primer_menu"> <li><a href="index.html">Главная</a></li> <li><a href="/production/">Каталог</a></li> <li><a href="/otzyvy/">Отзывы</a></li> <li><a href="/about/">О компании</a></li> <li><a href="/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="spisok_ver3"> <li>Элемент #1</li> <li>Элемент #2</li> <li>Элемент #3</li> <li>Элемент #4</li> </ul> </body> </html>

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

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


Читайте также:
• Коды символов для HTML
• Как убрать маркеры в маркированном списке
• Как сделать нумерованный список
• Как добавить кнопку "Наверх" на сайте
• Как сделать выпадающие меню
• Как сделать якорь ссылки
• Как сделать форму обратной связи на php с каптчей
• Как скруглить углы в HTML через CSS
• Как изменить вид ссылки при наведении
• Что такое микроразметка сайта

← Перейти в каталог html уроков и советов

Основные разделы
  • Главная
  • Партнерские программы
  • Рейтинг партнерских программ
  • Статьи про SEO
  • Термины SEO
  • Описание бирж
  • HTML-уроки и советы
  • CSS-уроки
  • Биткоины
  • PHP-уроки
  • Бинарные опционы
  • Социальные сети
  • Обзоры систем
  • Все про CMS
  • Реклама в интернете
Важно
  • Продвижение сайта
  • Аудит внутренней оптимизации
  • Куплю Ваш сайт
  • Куплю Вашу подпись на форуме
  • Подписаться на рассылку
  • Реклама на сайте
  • Карта сайта
  • Обратная связь
© 2010-2023 - Zarabotat-Na-Sajte.ru