Пункти списку за замовчуванням вибудовуються вертикально один під одним, але іноді потрібно розмістити їх по горизонталі, наприклад, для створення різних меню. У такому випадку до селектора 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.
Зверніть увагу, що між пунктами списку з'являється невелика відстань. Як його прибрати читайте цей рецепт.