Пункты списка по умолчанию выстраиваются вертикально друг под другом, но иногда требуется разместить их по горизонтали, например, для создания различных меню. В таком случае к селектору li следует добавить стилевое свойство display со значением inline-block, оно преобразует элемент в строчно-блочный (пример 1).
Пример 1. Горизонтальный список
<!DOCTYPE html>
<html lang="ru">
<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.
Заметьте, что между пунктами списка появляется небольшое расстояние. Как его убрать читайте этот рецепт.
Другой способ размещения пунктов списка горизонтально основан на флекс-элементах. К списку достаточно добавить свойство display со значением flex и убрать маркеры через list-style (пример 2).
Пример 2. Использование флексов
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Горизонтальный список</title>
<style>
ul.hr {
/* Обнуляем значение отступов и полей */
margin: 0; padding: 0;
display: flex; /* Используем флексы */
list-style: none; /* Убираем маркеры */
}
ul.hr li {
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>
Обратите внимание, что в этом примере между пунктами списка не возникает пустого промежутка.