Превращение списка в горизонтальный обычно делается с помощью свойства 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; /* Строчно-блочный элемент */
padding: 4px; /* Поля вокруг текста */
background: #0075b2; /* Цвет фона */
color: #fff; /* Цвет текста */
}
</style>
</head>
<body>
<ul class="hr">
<li>Мчади</li>
<li>Када на мацони</li>
<li>Пахлава</li>
<li>Кчуч</li>
<li>Лилибдж</li>
</ul>
</body>
</html>
Промежуток появляется из-за особенностей строчных элементов, которые воспринимают перевод строки как пробел. Таким образом и возникают пробелы между словами.
Для избавления от промежутков между пунктами списка существует несколько способов, ниже перечислим наиболее популярные.
Написание в одну строку
Если ненужные нам промежутки возникают из-за перевода строк, то достаточно написать код в одну строку без пробелов и переводов.
<ul class="hr">
<li>Мчади</li><li>Када на мацони</li><li>Пахлава</li><li>Кчуч</li><li>Лилибдж</li>
</ul>
Использование комментариев
Пробелы и переводы строки можно скрыть с помощью пустого комментария, поместив его между закрывающим и открывающим тегами.
<ul class="hr">
<li>Мчади</li><!--
--><li>Када на мацони</li><!--
--><li>Пахлава</li><!--
--><li>Кчуч</li><!--
--><li>Лилибдж</li>
</ul>
Комментарии скрывают для браузера пробелы и переводы строк, поэтому браузер воспринимает такой код как одну строку.
Нет закрывающих тегов
Если в коде списка убрать закрывающий тег </li>, то браузер добавит его самостоятельно перед открывающим тегом <li>, тем самым исключив перенос строк.
<ul class="hr">
<li>Мчади
<li>Када на мацони
<li>Пахлава
<li>Кчуч
<li>Лилибдж
</ul>
Размер шрифта
Предыдущие методы основывались на изменении кода HTML, что не всегда возможно или удобно. Стили позволяют решить нашу проблему, не затрагивая HTML. Одним из способов является изменение шрифта до 0. Для всего списка ul свойство font-size устанавливаем нулевым, а для пунктов списка восстанавливаем до значения 1rem (пример 2). Получается, что пробел станет символом со шрифтом нулевого размера и перестанет отображаться.
Пример 2. Использование font-size
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Горизонтальный список</title>
<style>
ul.hr {
/* Обнуляем значение отступов и полей */
margin: 0; padding: 0;
font-size: 0;
}
ul.hr li {
display: inline-block; /* Строчно-блочный элемент */
padding: 4px; /* Поля вокруг текста */
background: #0075b2; /* Цвет фона */
color: #fff; /* Цвет текста */
font-size: 1rem; /* Размер текста */
}
</style>
</head>
<body>
<ul class="hr">
<li>Мчади</li>
<li>Када на мацони</li>
<li>Пахлава</li>
<li>Кчуч</li>
<li>Лилибдж</li>
</ul>
</body>
</html>
Использование float
Если промежутки между горизонтальными пунктами списка возникают из-за использования свойства display, то в данном случае можно от него отказаться в пользу других вариантов. Для горизонтального размещения элементов применяется старый известный метод, основанный на свойстве float. Пунктам списка задаём float со значением left, а для списка ul устанавливаем overflow со значением hidden (пример 3). Свойство overflow необходимо для ограничения действия float, которое продолжается и за пределами списка.
Пример 3. Использование float
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Горизонтальный список</title>
<style>
ul.hr {
/* Обнуляем значение отступов и полей */
margin: 0; padding: 0;
overflow: hidden; /* Отменяем действие float */
}
ul.hr li {
float: left; /* Выстраиваем по горизонтали */
list-style: none; /* Убираем маркеры списка */
padding: 4px; /* Поля вокруг текста */
background: #0075b2; /* Цвет фона */
color: #fff; /* Цвет текста */
}
</style>
</head>
<body>
<ul class="hr">
<li>Мчади</li>
<li>Када на мацони</li>
<li>Пахлава</li>
<li>Кчуч</li>
<li>Лилибдж</li>
</ul>
</body>
</html>
Использование flex
Современный и простой метод размещения пунктов списка по горизонтали основан на флексах. Достаточно для ul задать свойство display со значением flex и текст выстроится по горизонтали без лишних пробелов (пример 4).
Пример 4. Использование flex
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Горизонтальный список</title>
<style>
ul.hr {
/* Обнуляем значение отступов и полей */
margin: 0; padding: 0;
display: flex; /* Включаем флексы */
}
ul.hr li {
list-style: none; /* Убираем маркеры списка */
padding: 4px; /* Поля вокруг текста */
background: #0075b2; /* Цвет фона */
color: #fff; /* Цвет текста */
}
</style>
</head>
<body>
<ul class="hr">
<li>Мчади</li>
<li>Када на мацони</li>
<li>Пахлава</li>
<li>Кчуч</li>
<li>Лилибдж</li>
</ul>
</body>
</html>