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

Пункты списка по умолчанию выстраиваются вертикально друг под другом, но иногда требуется разместить их по горизонтали, например, для создания различных меню. В таком случае к селектору 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.

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

Списки

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 18.09.2018

Редакторы: Влад Мержевич