Css убрать у списка точки – как убрать точку в нумерации списка OL. Как в css у элементов ul li убрать маркеры

Как убрать маркеры списка css?

Здравствуйте, дорогие друзья!

Рассмотрим как убрать маркеры списка в CSS, ведь такая необходимость возникает очень часто при работе как с маркированными так и с нумерованными списками.

Предположим у нас есть обычный список:

<ul> <li> Весна</li> <li> Лето</li> <li> Осень</li> <li> Зима</li> </ul>

<ul> <li> Весна</li> <li> Лето</li> <li> Осень</li> <li> Зима</li> </ul>

По умолчанию он будет отображаться с вот такими маркерами в виде точек:

Если мы хотим убрать маркеры списка, то нам нужно для его элементов дописать CSS-свойство list-style:none; или list-style-type: none;

.my-list { list-style:none; }

.my-list { list-style:none; }

Если наш список не имеет своего класса, но находится в каком то блоке, как здесь:

<div> <ul> <li> …</li> <li> …</li> </ul> </div>

<div> <ul> <li> …</li> <li> …</li> </ul> </div>

То CSS код будет выглядеть так:

. block ul li { list-style:none; }

. block ul li { list-style:none; }

Аналогично мы можем убрать цифры в нумерованном списке, только вместо ul нужно указывать ol.

Это свойство позволит нам убрать маркер, но отступ слева останется.

Чтобы убрать этот отступ слева применим для тегов <li< CSS свойство margin-left:0px;

.my-list { margin-left:0px; }

.my-list { margin-left:0px; }

Если дописанные CSS свойства у вас не срабатывают, то можно дописать им правило !important чтобы поднять их приоритет.

margin-left:0px!important;

margin-left:0px!important;

Если и это не поможет, то читаем внимательно статью «Почему не работают CSS-стили?»

Так же вы можете стилизовать маркированный список заменив стандартный маркер на другой или добавить своё изображение маркера. Подробнее о том как это сделать написано в этой статье: «Как сделать красивый маркированный список HTML?»

Надеюсь что эта статья поможет вам быстрее решить проблему с маркерами и у вас ещё останется время чтобы посмотреть вот это интересное видео про самые необычные здания:

Вот, вроде бы и всё! Если у вас возникнут какие то вопросы или трудности с тем как убрать маркер или вам есть что сказать – оставляете свои комментарии!

С уважением Юлия Гусарь

Маркеры списка в CSS

В языке CSS есть возможность создавать маркерованные списки и есть возможность стилизовать маркеры, а также в качестве них добавлять определённые изображения.

Рассмотрим все основные маркеры.

Простые маркеры

Для этого просто созданим простой маркерованный список через теги <ul> и <li>

• Пункт 1
• Пункт 2
• Пункт 3

В результате получим стандартные списки

• Пункт 1
• Пункт 2
• Пункт 3

Маркер — картинка

Также в качестве маркеров можно использовать любые изображения. Для этого отменяем отображения стандартных маркеров, указываем путь до нужного изображения и добавляем отступы в наших стилях CSS

	ul li{
	    list-style: none; 
	    background: url(assets/img/marker1.png) no-repeat left 50%; 
	    padding-left: 25px;
	}

И мы увидим, что вместо простых маркеров у нас используется картинка.

• Пункт 1
• Пункт 2
• Пункт 3

Убрать маркеры списка через css

Чтобы полностью отключить маркеры у списков, добавьте к ним стиль css

	ul li{list-style: none}

И в результате мы не увидим маркеры

• Пункт 1
• Пункт 2
• Пункт 3

Стандартные маркеры в css

Ниже показана таблица в которые вы можете увидить все маркеры, которые задать через язык CSS, а именно через стиль list-style

Возможные варианты списков

Код	Пример
<li>	Маркер «сплошной кружок»: Пункт 1 Пункт 2 Пункт 3
<li>	Маркер «окружность»: Пункт 1 Пункт 2 Пункт 3
<li>	Маркер «сплошной квадрат»: Пункт 1 Пункт 2 Пункт 3
<li>	Маркер арабскими цифрами Пункт 1 Пункт 2 Пункт 3
<li>	Маркер со строчными римскими цифрами: Пункт 1 Пункт 2 Пункт 3
<li>	Маркер с заглавными римскими цифрами: Пункт 1 Пункт 2 Пункт 3
<li>	Маркер со строчными буквами латинского алфавита: Пункт 1 Пункт 2 Пункт 3
<li>	Мареер с заглавными буквами латинского алфавита: Пункт 1 Пункт 2 Пункт 3

Маркированный список | htmlbook.ru



Маркированный список | htmlbook.ru

Темы рецептов

Добавьте свойство margin-left к селектору UL или OL, соответственно, для маркированного или нумерованного списка. Браузер Firefox, Safari и Chrome одновременно с отступами добавляет к списку поля (свойство padding), поэтому для одинакового отображения списка в разных браузерах необходимо обнулить значение padding.

Для изменения расстояния между маркером списка и текстом используйте свойство padding-left для селектора LI.

С помощью HTML или CSS допускается устанавливать один из трех типов маркеров: disc (точка), circle (кружок), square (квадрат). Добавлять эти значения нужно к стилевому свойству list-style-type, которое указывается для селектора UL или LI.

Чтобы задать свой рисунок маркера, воспользуйтесь стилевым свойством list-style-image, в качестве значения которого указывается url, а в скобках — путь к желаемому изображению.

Для этой цели применяется стилевое свойство list-style-type со значением none. Его следует добавить к селектору UL или LI.

Существует два способа изменения цвета маркеров, условно назовем их простой и хитрый. Простой метод состоит в том, что внутрь контейнера <li> вкладываем тег <span>, а уже внутрь него помещаем текст. Иными словами вместо традиционной схемы <li>текст</li> создаем конструкцию <li><span>текст</span></li>. При этом цвет маркеров определяется стилевым свойством color для селектора LI, а цвет текста — для селектора SPAN.

О сайте

Помощь

Копирование материалов

Борьба с ошибками

Технологии

Поисковый плагин

Основные разделы

Статьи

Блог

Практикум

Цифровые книги

Форум

HTML

Самоучитель HTML

XHTML

Справочник по HTML

HTML5

CSS

Самоучитель CSS

Справочник по CSS

Рецепты CSS

CSS3

Сайт

Вёрстка

Макеты

Веб-сервер

htmlbook.ru использует Друпал хостинг it-patrol

© 2002–2020 Влад Мержевич, по всем вопросам пишите по адресу [email protected]

Подпишитесь на материалы сайта по RSS

Хочу изменить вид маркера на другой символ. Как это сделать?

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
8.0+	1.0+	7.0+	1.0+	1.0+	1.0+	1.0+

Задача

Изменить вид маркеров в списке и заменить их на другой символ.

Решение

С помощью HTML или CSS допускается устанавливать один из трех типов маркеров: disc (точка), circle (кружок), square (квадрат). Добавлять эти значения нужно к стилевому свойству list-style-type, которое указывается для селектора UL или LI (пример 1).

Пример 1. Стандартные маркеры

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"> 
  <title>Квадратные маркеры</title>
  <style>
   ul {
    list-style-type: square; /* Квадратные маркеры */
   }
  </style>
 </head>
 <body> 
  <ul>
    <li>Чебурашка</li>
    <li>Крокодил Гена</li>
    <li>Шапокляк</li>
  </ul>
 </body>
</html> 

В данном примере в качестве маркеров используется квадрат (рис. 1).

Рис. 1. Вид маркеров

Выбор и установка собственного символа маркера происходит весьма своеобразно, через псевдоэлемент :before. Вначале следует вообще убрать маркеры у списка, присвоив значение none стилевому свойству list-style-type, а затем добавить псевдоэлемент :before к селектору LI. Сам вывод символа осуществляется с помощью свойства content, в качестве значения которого и выступает желаемый текст или символ (пример 2).

Пример 2. Использование :before и content

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Символ в качестве маркера</title>
  <style>
   li {
    list-style-type: none; /* Убираем маркеры у списка */
   }
   li:before {
    content: "ƥ "; /* Добавляем в качестве маркера символ */
   }
  </style>
 </head>
 <body>
  <ul>
    <li>Чебурашка</li>
    <li>Крокодил Гена</li>
    <li>Шапокляк</li>
  </ul>
 </body>
</html>

В данном примере маркер, установленный по умолчанию, прячется, а взамен добавляется символ (рис. 2).

Рис. 2. Маркеры в виде символа

Чтобы установить в качестве маркера какой-нибудь хитрый символ, можно воспользоваться программой Microsoft Word или таблицей символов, это стандартная программа входящая в комплект Windows. Кодировка кода должна быть обязательно UTF-8.

CSS: Убираем отступы у списка ссылок

При создании блока со списком ссылок обычно рекомендуется использовать свойство display с атрибутами block или inline-block, что позволит увеличить размер активного поля ссылки. Большие активные поля ссылок улучшают юзабилити элементов, по крупным элементам проще попасть мышью.

Элементы с display: block отображается как блочный.

Элемент с display: inline-block отображается как блочный элемент, который обтекается другими элементами, как встроенный. Содержимое отформатировано как блочный элемент, а сам элемент отформатирован как встроенный.

Рассмотрим простой пример со списком ссылок:

<ul> 
<li><a href="#">This little</a></li> 
<li><a href="#">piggy went to</a></li> 
<li><a href="#">market</a></li> 
</ul> 

Если не изменять стиль ссылок, то размер их активных полей соответствую размеру текста внутри них.

Мы можем это улучшить, сделав размер активного поля по ширине родительского элемента.

ul a { display: block; } 

Мы можем сделать ещё лучше.

1. Убедитесь, что у элементов списка отсутствуют поля, в отличии от ссылок.
2. Ссылки не имеют внешних отступов, так как эти отступы не являются активной областью элементов.

ul li { padding: 0; margin: 0; } 
ul a { padding: 5px; display: block; }

Статья и состоит из очевидных вещей, но мы довольно часто можем встретить на просторах интернета блоки ссылок не «обезображенные» увеличенными активными полями.

Оригинал статьи: Keep Margins Out of Link Lists By: Chris Coyier on 11/29/2010

Похожие по тематике посты: