Влад Мержевич
Тема:Списки
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 6.0+ | 1.0+ | 7.0+ | 3.0+ | 1.0+ | 1.0+ | 1.0+ |
Завдання
Вивести маркований список в одному рядку та прибрати відображення маркерів.
Рішення
Елементи списку за замовчуванням розташовуються вертикально один під одним, але іноді потрібно розмістити їх горизонтально, наприклад, для створення різноманітних меню. У цьому випадку до селектора LI слід додати стилеве властивість display зі значенням inline, що перетворить блочний елемент в рядковий (приклад 1).
Приклад 1. Горизонтальний список
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Горизонтальний список</title>
<style>
ul.hr {
margin: 0; /* Обнулюємо значення відступів */
padding: 4px; /* Значення полів */
}
ul.hr li {
display: inline; /* Відображати як рядковий елемент */
margin-right: 5px; /* Відступ зліва */
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, як показано у прикладі.