Иногда может понадобиться удалить маркеры/стили упорядоченных (<ol>) и неупорядоченных (<ul>) списков. Удаление маркеров списка не представляет трудности. Для этого можно использовать CSS свойство list-style или list-style-type.
Код будет иметь следующий вид:
ul {
list-style-type: none;
}
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
ul {
list-style: none;
}
ol {
list-style: none;
}
</style>
</head>
<body>
<h2>Неупорядоченный список</h2>
<ul>
<li>Элемент списка 1</li>
<li>Элемент списка 2</li>
<li>Элемент списка 3</li>
</ul>
<h2>Упорядоченный список</h2>
<ol>
<li>Элемент списка 1</li>
<li>Элемент списка 2</li>
<li>Элемент списка 3</li>
</ol>
</body>
</html>
Если хотите иметь только один список или один элемент списка без маркеров или чисел, можно применить класс, который может быть использован каждый раз для удаления маркеров.
Здесь у нас будет класс с названием "nolist" для упорядоченных списков. При необходимости он также может быть использован в будущем.
Можете также установить класс к любому элементу списка (<li>), не меняя остальные маркеры.
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
.nolist {
list-style: none ;
}
</style>
</head>
<body>
<h2>Неупорядоченный список</h2>
<ul>
<li>Элемент списка 1</li>
<li class="nolist">Элемент списка 2</li>
<li>Элемент списка 3</li>
</ul>
<h2>Упорядоченный список</strong></h2>
<ol class="nolist">
<li>Элемент списка 1</li>
<li>Элемент списка 2</li>
<li>Элемент списка 3</li>
</ol>
</body>
</html>
CSS может быть использован, чтобы превратить маркеры в квадраты или круги, но таким образом мы не имеем полного контроля над их внешним видом или положением. Замена стандартных HTML маркеров на изображения - отличный способ, чтобы сделать ваш сайт более привлекательным.
Есть два способа установления изображений для элементов списка:
HTML маркеры могут быть заменены на изображения с помощью "list-style-image". Но применение изображений не всегда совместимо с браузером.
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
ul {
list-style-image: url("/uploads/media/default/0001/02/1ac48d17fa5906a111bba2c4ca6f1363acb1893a.png");
}
</style>
</head>
<body>
<ul>
<li>Элемент списка 1</li>
<li>Элемент списка 2</li>
<li>Элемент списка 3</li>
</ul>
</body>
</html>
Стандартные списки HTML имеют отступ в определенной величине. Она отличается для каждого браузера. Для этого некоторые браузеры (Mozilla, Safari) используют отступ, а другие (Internet Explorer, Opera) - поля.
Для того, чтобы удалить левый отступ из всех браузеров, установите и padding и margin в "0" для элемента <ul>, как в данном примере:
ul {
padding: 0;
margin: 0;
}
В случае, если левый отступ обязателен, рекомендуется использовать margin-left. Так как сейчас padding установлено в "0", могут быть указаны точные измерения для левого поля, и это будет совместимо со всеми браузерами.
margin-left: 1em;
Используйте CSS свойство background-image, чтобы добавить фоновое изображение для элемента <li>. Таким образом, фоновое изображение будет повторяться для фона каждого элемента списка, что не будет красиво смотреться.
Чтобы фоновое изображение не повторялось в фоне элементов списка, задайте "no-repeat" для свойства background-repeat. Здесь установлено только одно изображение для каждого элемента, но требуется изменить положение.
li {
background-image: url(star.png);
background-repeat: no-repeat;
}
Используйте CSS свойство background-position для установления такого положения фонового изображения, чтобы оно соответствовало тексту.
Сейчас изображения выстроены в линию по горизонтали вместе с контентом. Но контент расположен наверху изображений.
background-position: 1px;
Чтобы отдалить контент от фонового изображения, примените padding-left к элементу <li>. В данном случае используется "20px". Как и в случае вертикального выравнивания, отступ списка будет определен размером изображения.
padding-left: 20px;
А сейчас увидим каким будет полный пример:
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
background-image: url("/uploads/media/default/0001/02/1ac48d17fa5906a111bba2c4ca6f1363acb1893a.png");
background-repeat: no-repeat;
background-position: 1px;
padding-left: 20px;
}
</style>
</head>
<body>
<ul>
<li>Зеленый</li>
<li>Синий</li>
<li>Желтый</li>
<li>Красный</li>
</ul>
</body>
</html>
Создание горизонтальных списков не так уж трудно. Это отличный способ сделать так, чтобы списки действовали как кнопки или навигационное меню. Есть много методов, которые можно использовать для создания горизонтального списка. Главное установить display: inline указанный для элемента <li>.
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
#container ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#container ul li {
display: inline;
}
#container ul li a {
text-decoration: none;
padding: 5px 20px;
color: #fff;
background-color: #1c87c9;
}
#container ul li a:hover
{
color: #fff;
background-color: #369;
}
</style>
</head>
<body>
<div id="container">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
</body>
</html>
Добавьте стиль к спискам с помощью свойств color и background-color:
<!DOCTYPE html>
<html>
<head>
<style>
ol {
background: #1c87c9;
padding: 20px;
color: cyan;
}
ul {
background: #8ebf42;
padding: 20px;
}
ol li {
background: #666;
padding: 5px;
margin-left: 35px;
}
ul li {
background: #eee;
margin: 5px;
}
</style>
</head>
<body>
<ol>
<li>Кофе</li>
<li>Чай</li>
<li>Молоко</li>
</ol>
<ul>
<li>Кофе</li>
<li>Чай</li>
<li>Молоко</li>
</ul>
</body>
</html>
Создайте список с полной шириной границ, используя CSS свойства border и border-bottom:
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
ul {
border: 1px solid #ddd;
background-color: #eee;
list-style-type: none;
padding: 0;
}
ul li {
padding: 8px 10px;
border-bottom: 1px solid #ddd;
}
ul li:last-child {
border-bottom: none;
}
</style>
</head>
<body>
<ul>
<li>Кофе</li>
<li>Чай</li>
<li>Молоко</li>
</ul>
</body>
</html>
Добавьте границу к элементам вашего списка, используя CSS свойство border-left:
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
ul {
border-left: 5px solid #8ebf42;
background-color: #eee;
list-style-type: none;
padding: 10px 20px;
}
</style>
</head>
<body>
<div id="container">
<ul>
<li>Кофе</li>
<li>Чай</li>
<li>Молоко</li>
</ul>
</div>
</body>
</html>
Чтобы иметь разные маркеры в одном списке, необходимо применить класс к к каждому элементу списка и отдельно для каждого указать list-style.
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
.disc {
list-style: disc;
}
.square {
list-style: square;
}
.armenian {
list-style: armenian;
}
.lower-greek {
list-style: lower-greek;
}
</style>
</head>
<body>
<ul>
<li class="disc">Круглый маркер</li>
<li class="square">Квадратный маркер</li>
<li class="armenian">Армянский маркер</li>
<li class="lower-greek">Греческий маркер</li>
</ul>
</body>
</html>
В этом примере увидите разные виды упорядоченных (<ol>) и неупорядоченных (<ul>) списков:
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
ol.e {list-style-type: armenian;}
ol.f {list-style-type: decimal;}
ol.g {list-style-type: cjk-ideographic;}
ol.h {list-style-type: decimal-leading-zero;}
ol.i {list-style-type: georgian;}
ol.j {list-style-type: hebrew;}
ol.k {list-style-type: hiragana;}
ol.l {list-style-type: hiragana-iroha;}
ol.m {list-style-type: katakana;}
ol.n {list-style-type: katakana-iroha;}
ol.o {list-style-type: lower-greek;}
ol.p {list-style-type: lower-latin;}
ol.q {list-style-type: lower-roman;}
ol.r {list-style-type: none;}
ol.s {list-style-type: upper-alpha;}
ol.t {list-style-type: upper-latin;}
</style>
</head>
<body>
<h2>Примеры неупорядоченных списков </h2>
<h3>Circle</h3>
<ul class="a">
<li>Нью-Йорк</li>
<li>Лас-Вегас</li>
<li>Вашингтон</li>
</ul>
<h3>Square</h3>
<ul class="b">
<li>Сан-Франциско</li>
<li>Лос-Анджелес</li>
<li>Майами</li>
</ul>
<h2>Примеры упорядоченных списков:</h2>
<h3>Upper-roman</h3>
<ol class="c">
<li>Барселона</li>
<li>Мадрид</li>
<li>Лондон</li>
</ol>
<h3>Lower-alpha</h3>
<ol class="d">
<li>Дубай</li>
<li>Абу-Даби</li>
<li>Катар</li>
</ol>
<h3>Armenian</h3>
<ol class="e">
<li>Ереван</li>
<li>Париж</li>
<li>Рим</li>
</ol>
<h3>Decimal</h3>
<ol class="f">
<li>Сидней</li>
<li>Гонк Конг</li>
<li>Москва</li>
</ol>
<h3>Cjk-ideographic</h3>
<ol class="g">
<li>Киев</li>
<li>Санкт-Петербург</li>
<li>Тула</li>
</ol>
<h3>Decimal-leading-zero</h3>
<ol class="h">
<li>Бангкок</li>
<li>Гюмри</li>
<li>Валенсия</li>
</ol>
<h3>Georgian</h3>
<ol class="i">
<li>Мадрид</li>
<li>Барселона</li>
<li>Прага</li>
</ol>
<h3>Hebrew</h3>
<ol class="j">
<li>Иерусалим</li>
<li>Торонто</li>
<li>Прага</li>
</ol>
<h3>Hiragana</h3>
<ol class="k">
<li>Каир</li>
<li>Токио</li>
<li>Афины</li>
</ol>
<h3>Hiragana-iroha</h3>
<ol class="l">
<li>Тегеран</li>
<li>Тебриз</li>
<li>Тель-Авив</li>
</ol>
<h3>Katakana</h3>
<ol class="m">
<li>Мюнхен</li>
<li>Берлин</li>
<li>Бавария</li>
</ol>
<h3>Katakana-iroha</h3>
<ol class="n">
<li>Брюссель</li>
<li>Стамбул</li>
<li>Сидней</li>
</ol>
<h3>Lower-greek</h3>
<ol class="o">
<li>Севилья</li>
<li>Гранада</li>
<li>Венеция</li>
</ol>
<h3>Lower-latin</h3>
<ol class="p">
<li>Будапешт</li>
<li>Виенна</li>
<li>Амстердам</li>
</ol>
<h3>Lower-roman</h3>
<ol class="q">
<li>Буэнос-Айрес</li>
<li>Рио-де-Жанейро</li>
<li>Сан-Паоло</li>
</ol>
<h3>None</h3>
<ol class="r">
<li>Вильнюс</li>
<li>Таллинн</li>
<li>Рига</li>
</ol>
<h3>Upper-alpha</h3>
<ol class="s">
<li>Монреаль</li>
<li>Мельбурн</li>
<li>Эдинбург</li>
</ol>
<h3>Upper-latin</h3>
<ol class="t">
<li>Дублин</li>
<li>Мексика</li>
<li>Флоренция</li>
</ol>
</body>
</html>