Перетворення списку на горизонтальний зазвичай здійснюється за допомогою властивості 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>Проміжок з'являється через особливості рядкових елементів, які сприймають переклад рядка як пробіл. Таким чином і виникають прогалини між словами.
Для позбавлення від проміжків між пунктами списку існує кілька способів, нижче перерахуємо найбільш популярні.
Написання в один рядок
Якщо непотрібні нам проміжки виникають через переклад рядків, достатньо написати код в один рядок без пробілів і перекладів.
Використання коментарів
Пробіли та переклади рядка можна приховати за допомогою порожнього коментаря, помістивши його між закриваючим та відкриваючим тегами.
Коментарі приховують для браузера пробіли та переклади рядків, тому браузер сприймає такий код як один рядок.
Немає тегів, що закривають
Якщо в коді списку прибрати закриваючий тег </li>, то браузер додасть його самостійно перед тегом <li>, тим виключивши перенесення рядків.
Розмір шрифту
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>