Главная » Вебмастеру » Как разместить пункты списка горизонтально?
Среда, Февраль 6th, 2019

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Горизонтальный список</title>
<style>
ul.hr {
/* Обнуляем значение отступов и полей */
margin: 0; padding: 0;
}
ul.hr li {
display: inline-block; /* Строчно-блочный элемент */
border: 1px solid #000; /* Рамка вокруг текста */
padding: 3px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<ul class="hr">
<li>Мчади</li>
<li>Када на мацони</li>
<li>Пахлава</li>
<li>Кчуч</li>
<li>Лилибдж</li>
</ul>
</body>
</html>

Читайте также »   Как сделать ссылку на адрес электронной почты?

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

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

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

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

Заметьте, что между пунктами списка появляется небольшое расстояние. Как его убрать читайте этот рецепт.

Источник