| 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>
<li>Пес Сірко</li>
</ul>
</body>
</html>
Результат цього прикладу показано на рис. 1.
Рис. 1. Горизонтальний список
З-за того, що навколо списку автоматично додаються відступи, їх слід змінити, додаючи властивості margin і padding до селектору UL, як показано в прикладі.