Html убрать точки li: Как убрать маркеры в маркированном списке?

Leave a Comment / Html / By /

Содержание

Как убрать маркеры списка 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?»

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





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

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

Удаление черных точек с li и ul



Я работаю над проектом и использую некоторые ul и li.

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

Кто-нибудь из вас может мне помочь?

Edit: я совершенно забыл поискать этот сайт, если там уже был ответ (сумасшедший), оказывается, был! Пометил это как дубликат, спасибо всем за помощь!

html css
Поделиться Источник ProRacer420     01 апреля 2016 в 07:55

3 ответа

  • Как сбросить <ul> и <li> внутри html?

    Как я могу сбросить теги <ul> and <li> по умолчанию внутри файла html, не касаясь css? Например, это дает мне все элементы горизонтально выстроенные одинаково без каких-либо отступов. Я предполагаю, что они получают свои атрибуты из файла css, удаление ссылки css в файле html делает их…

  • Почему css float ведет себя по-разному с <ul> и <li> ?

    Взято из w3schools (посетите ссылку, чтобы увидеть, как это выглядит): <!DOCTYPE html> <html> <head> <style> ul { float:left; width:100%; padding:0; margin:0; list-style-type:none; } a { float:left; width:6em; text-decoration:none; color:white; background-color:purple;…


202

Соответствующий пост

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

Их довольно просто удалить, просто добавьте эту строку в свой css:

ul {
    list-style-type: none;
}

Надеюсь, это поможет

Поделиться D.Freeman     01 апреля 2016 в 07:58


16

Вот так, вот что я использовал, чтобы решить твою проблему.:

CSS КОД

nav ul { list-style-type: none; }

HTML КОД

<nav>
<ul>
<li><a href="#">Milk</a>
   <ul>
   <li><a href="#">Goat</a></li>
   <li><a href="#">Cow</a></li>
   </ul>
</li>
<li><a href="#">Eggs</a>
   <ul>
   <li><a href="#">Free-range</a></li>
   <li><a href="#">Other</a></li>
   </ul>
</li>
<li><a href="#">Cheese</a>
   <ul>
   <li><a href="#">Smelly</a></li>
   <li><a href="#">Extra smelly</a></li>
   </ul>
</li>
</ul>
</nav>

Поделиться Cristiano Perdigão     01 апреля 2016 в 08:02


13

CSS :

ul{
list-style-type:none;
}

Вы можете взглянуть на W3School

Поделиться Alexis     01 апреля 2016 в 07:59

  • Удаление выбранного LI из UL

    Я пытаюсь удалить выбранный элемент, класс которого имеет selected, но вместо того, чтобы просто удалить элемент LI, весь список очищается. Для этого я использую jQuery. Я быстро собрал fiddle: http://jsfiddle.net/6QvvC/4 / <!DOCTYPE html> <html> <meta http-equiv=content-type…

  • Удалить li из ul с помощью идентификатора li

    У меня есть выпадающий список, где есть варианты в li. Я хочу динамически удалить li с определенным идентификатором. Структура как показано ниже <ul class=es-list style=top: 305.483px; left: 191.25px; width: 194px; display: block;> <li id=from_7 class= value=7 style=display:…

Похожие вопросы:


jQuery удалить LI из UL с гиперссылкой в LI

У меня есть неупорядоченный список: <ul id=sortable> <li id=1 class=ui-state-default>First <a href=’#’ title=’delete’ class=itemDelete>x</a></li> <li id=2…


Удаление класса из UL LI, но не UL LI UL LI с jQuery

Я изменяю сценарий аккордеона, чтобы добавить класс active к ссылке, по которой вы нажимаете, но для подпунктов у меня есть проблема. В принципе, если вы нажмете на дочерний аккордеон, мне нужно,…


Получить <li> с ребенком <ul> от <ul> ребенка <li>

У меня здесь есть очень простой пример меню: <ul id=1> <li><a href=#>First</a></li> <li><a href=#>Second</a> <ul id=2> <li><a…


Как сбросить <ul> и <li> внутри html?

Как я могу сбросить теги <ul> and <li> по умолчанию внутри файла html, не касаясь css? Например, это дает мне все элементы горизонтально выстроенные одинаково без каких-либо отступов. Я…


Почему css float ведет себя по-разному с <ul> и <li> ?

Взято из w3schools (посетите ссылку, чтобы увидеть, как это выглядит): <!DOCTYPE html> <html> <head> <style> ul { float:left; width:100%; padding:0; margin:0;…


Удаление выбранного LI из UL

Я пытаюсь удалить выбранный элемент, класс которого имеет selected, но вместо того, чтобы просто удалить элемент LI, весь список очищается. Для этого я использую jQuery. Я быстро собрал fiddle:…


Удалить li из ul с помощью идентификатора li

У меня есть выпадающий список, где есть варианты в li. Я хочу динамически удалить li с определенным идентификатором. Структура как показано ниже <ul class=es-list style=top: 305.483px; left:…


удаление черных точек с изображения с помощью OpenCV и Python

Я пытаюсь сравнить два изображения, и мне нужно pre-process/clean одно из них, которое является сканированной копией, прежде чем сравнивать с цифровой копией. Отсканированная копия / Цифровая копия…


группировка ul li без создания ul и li

у меня есть такие данные, как это UL LI <ul> <li>Person 1</li> <li>Person 2</li> <li>Person 3</li> <li>Person 4</li> </ul> но теперь я…


C#-распознавание черных точек по фотографии

У меня есть несколько фотографий белых страниц с нарисованными черными точками, например: фотография (точки не очень круглые, я могу нарисовать их лучше), и я бы нашел координаты этих точек. Я могу…

Html ul li убрать маркер

В некоторых случаях может понадобиться создать маркированный список без маркеров. Ниже описано несколько способов реализации этого с помощью HTML . В том числе и с помощь list style none .

Пример HTML

Добавление стиля «list-style: none» в тег неупорядоченного (

    ) или упорядоченного списка (
    ) уберет любые маркеры или номера:

Пример HTML с CSS

Приведенный выше пример работает почти в любой ситуации. Но лучше размещать CSS во внешнем файле стилей. Ниже приведены CSS и HTML , которые можно использовать для удаления маркеров.

Применение этого кода CSS удаляет маркеры из всех неупорядоченных списков (

    ). Это может понадобиться, если вы не намерены ставить маркеры или хотите использовать вместо них изображения:

Но лучше создать класс list style none CSS , который можно будет использовать в том случае, когда не нужно показывать маркеры. Код CSS :

В приведенном выше коде CSS создается новый класс «nobull» . Его можно задействовать в тех случаях, когда не нужно показывать маркер. Например:

Подсказка : Этот класс можно применить для любого элемента списка (
), чтобы скрыть маркер напротив определенных элементов, но оставить другие маркеры.

Вывод примера

Ниже показано, как выводится на экран неупорядоченный список без маркеров с помощью list style type none .

Данная публикация представляет собой перевод статьи « How to create a bullet list with no bullets in HTML » , подготовленной дружной командой проекта Интернет-технологии.ру

Тип маркера

Существует возможность установки внешнего вида маркера элементов списка. В том числе, можно вообще убрать маркер списка CSS. Для этого есть свойство list-style-type . У него достаточно много значений. Часть значений применяется для маркированного, другая часть для нумерованного списка.

Для маркированного списка:

list-style-type: disc – в виде диска (по умолчанию)

list-style-type: circle – в виде круга

list-style-type: square – в виде квадрата

Для нумерованного списка

list-style-type: decimal – арабские цифры (по умолчанию)

list-style-type: decimal-leading-zero – арабские цифры c 0 впереди для чисел 1-9

list-style-type: upper-roman – заглавные римские цифры

list-style-type: lower-roman – строчные римские цифры

list-style-type: upper-latin – заглавные латинские буквы

list-style-type: upper-alpha – то же, что и upper-latin

list-style-type: lower-latin – строчные латинские буквы

list-style-type: lower-alpha – то же, что и lower-latin

list-style-type: lower-greek – строчные греческие буквы

list-style-type: armenian – армянские числа

list-style-type: georgean – грузинские числа

list-style-type: none – позволяет убрать маркеры списка. Для обоих списков

list-style-type: inherit – значение принимается от родительского элемента. Для обоих списков

Создадим на странице маркированный и нумерованный списки и установим для них тип маркера:

Попробуйте установить другие типы маркера.

Как убрать маркеры списка в CSS

Значение none позволяет убрать маркеры списка. Пример:

Позиция маркера

Маркер может занимать в списке две позиции. Он может находиться за пределами элемента списка и занимать своё место на странице. А может находиться внутри элемента списка и быть частью текста. Это выгладит так:

  • В этом пункте списка маркер находится за пределами элемента и занимает своё место на странице.
  • В этом пункте списка маркер входит в элемент списка и является частью текста

Позицию маркера устанавливает свойство list-style-position . Оно принимает значения:

list-style-position: outside – за пределами элемента (по умолчанию)

list-style-position: inside – внутри элемента

Добавим в маркерованный список ещё один пункт с длинным текстом и добавим селектору #nl1 свойство list-style-position :

Маркер в виде изображения

В качестве маркера может быть использовано изображение. При этом, список может выглядеть так:

Для использлвания изображения существует свойство list-style-image . Значением свойства является путь к файлу изображения.

Для примера Вы можете использовать это изображение: Нажмите на него правой кнопкой мыши и выберите «Сохранить изображение как».

Добавим на страницу ещё один список и установим для него маркер в виде картинки. Назовём файл marker, он имеет расширение JPEG. Разместим его в той же папке, где находится страница. Иначе путь к файлу нужно прописывать по-другому.

Краткая запись

Существует возможность указать рассмотренные свойства более коротким способом. Для этого есть свойство list-style . В нём перечисляются через пробел сначала тип маркера, затем положение маркера, затем картинка. При этом, все свойства указывать не обязательно. Указываются только те свойства, которые нужны. Если изображение не установлено, то маркер зависит от того, маркерованный список или нумерованный, и от типа маркера.

Добавим на страницу ещё один список и установим ему стиль с помощью свойства list-style .

Любое из свойств, рассмотренных в данной теме можно установить как самому списку, так и отдельному элементу списка.

Коприрование материалов сайта возможно только с согласия администрации

За управление маркерами есть специальное свойство CSS list-style-type .

Синтаксис свойства CSS list-style-type

  • disc – маркер в виде закрашенного кружка
  • circle – маркер в виде прозрачного кружка
  • square – маркер в виде закрашенного квадрата
  • none – отсутствие маркера

CSS маркер списка

Списки на html страницах по умолчанию выводятся с маркерами, которые задаются параметрами «disc» для тега <ul> и «decimal» для тега <ol>.

Удаление маркеров списка


HTML

<div>
	<ul>
		<li>список без маркеров</li>
		<li>немаркированный список</li>
		<li>убрать маркеры</li>
	</ul>
</div>



CSS

.list-none li {
	list-style-type: none;
	margin-left: 48px;
}

Большие латинские буквы


HTML

<div>
	<ul>
		<li>прописные латинские буквы</li>
		<li>большие латинские буквы</li>
		<li>маркировка прописными латинскими буквами</li>
	</ul>
</div>



CSS

.big-latin li {
	list-style-type: upper-alpha;
	margin-left: 48px;
}

Маленькие латинские буквы


HTML

<div>
	<ul>
		<li>строчные латинские буквы</li>
		<li>маленькие латинские буквы</li>
		<li>маркировка строчными латинскими буквами</li>
	</ul>
</div>



CSS

.small-latin li {
	list-style-type: lower-alpha;
	margin-left: 48px;
}

Маленькие греческие буквы


HTML

<div>
	<ul>
		<li>строчные греческие буквы</li>
		<li>маленькие греческие буквы</li>
		<li>маркировка строчными греческими буквами</li>
	</ul>
</div>



CSS

.small-greek li {
	list-style-type: lower-greek;
	margin-left: 48px;
}

Большие римские числа


HTML

<div>
	<ol>
		<li>прописные римские числа</li>
		<li>большие римские числа</li>
		<li>маркировка прописными римскими числами</li>
	</ol>
</div>



CSS

.big-roman li {
	list-style-type: upper-roman;
	margin-left: 48px;
}

Маленькие римские числа


HTML

<div>
	<ol>
		<li>строчные римские числа</li>
		<li>маленькие римские числа</li>
		<li>маркировка строчными римскими числами</li>
	</ol>
</div>



CSS

.small-roman li {
	list-style-type: lower-roman;
	margin-left: 48px;
}

Нумерованный список

Работа с маркерами списков ul на CSS

Мы с вами еще в начале книги разбирались со списками ul и вы наверняка помните о том, что список ul имеет маркеры в виде точек. Однако, вид этих маркеров можно сменить или даже убрать их совсем. Делается это с помощью свойства list-style-type. Давайте посмотрим, какие значения оно может принимать для списка ul.

Значение square

Значение square позволяет сделать маркеры в виде квадратиков:

<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul> ul { list-style-type: square; }

:

Значение circle

Значение circle позволяет сделать маркеры в виде кружков:

<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul> ul { list-style-type: circle; }

:

Значение disc

Значение disc делает маркеры в виде закрашенных кружков (это значение по умолчанию):

<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul> ul { list-style-type: disc; }

:

Значение none

Значение none убирает маркеры совсем:

<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul> ul { list-style-type: none; }

:

Практические задачи

Повторите страницу по данному образцу:

Повторите страницу по данному образцу:

Сделайте список без маркеров, как в данном образце:

Уроки Bootstrap 3.0 для начинающих – списки. 7-й урок

» Уроки Bootstrap 3.0 для начинающих – списки. 7-й урок

В этом уроке вы узнаете и научитесь применять различные стили к различным видам списков с помощью Фреймворка Twitter Bootstrap. Вы увидите, как из обычного HTML списка можно быстро все оформить с помощью Bootstrap. Начну с простого.

Основные типы списков, которые мы рассмотрим в этом уроке:

  • Маркированный список – это список без нумерации. Перед каждым элементом списка добавляется небольшой маркер в виде закрашенного кружочка
  • Нумерованный список – это список, в котором есть нумерация (значение в виде цифр или букв)
  • Список определений – это список терминов и связанных с ними описаний

Создание стандартных списков c помощью Twitter Bootstrap

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

Создание маркированного списка

Чтобы создать маркированный список в Bootstrap, достаточно воспользоваться знаниями основ HTML. Здесь маркированные списки тоже создаются с помощью тегов <ul><li>……</li></ul>:


<ul>
    <li>Элемент маркированного списка</li>
    <li>Элемент маркированного списка</li>
    <li>Элемент маркированного списка</li>
    <li>Элемент маркированного списка</li>
    <li>Элемент маркированного списка</li>
</ul>

Результат:

  • Элемент маркированного списка
  • Элемент маркированного списка
  • Элемент маркированного списка
  • Элемент маркированного списка
  • Элемент маркированного списка

Более сложный список с двойным уровнем


<ul>
    <li>Элемент маркированного списка</li>
    <li>Элемент маркированного списка</li>
    <li>Элемент маркированного списка
        <ul>
            <li>Элемент 2 уровня</li>
            <li>Элемент 2 уровня</li>
            <li>Элемент 2 уровня</li>
        </ul>
    </li>
    <li>Элемент маркированного списка</li>
    <li>Элемент маркированного списка</li>
</ul>

Результат:

  • Элемент маркированного списка
  • Элемент маркированного списка
  • Элемент маркированного списка
    • Элемент 2 уровня
    • Элемент 2 уровня
    • Элемент 2 уровня
  • Элемент маркированного списка
  • Элемент маркированного списка

Создание нумерованного списка

Чтобы создать нумерованный список в Bootstrap, достаточно использовать стандартные HTML-теги <ol><li>……</li></ol>:


<ol>
    <li>Элемент нумерованного списка</li>
    <li>Элемент нумерованного списка</li>
    <li>Элемент нумерованного списка</li>
    <li>Элемент нумерованного списка</li>
    <li>Элемент нумерованного списка</li>
</ol>

Результат:

  1. Элемент нумерованного списка
  2. Элемент нумерованного списка
  3. Элемент нумерованного списка
  4. Элемент нумерованного списка
  5. Элемент нумерованного списка

Создание списка определений

Чтобы создать список определений в Bootstrap, достаточно использовать стандартные HTML-теги <dl><dt><dd>……</dd></dt></dl>:


<dl>
   <dt>Тег</dt>
     <dd>Тег — это ........</dd>
   <dt>HTML-документ</dt>
     <dd>HTML-документ — это ........</dd>
   <dt>Сайт</dt>
   <dd>Cайт — это .........</dd>
</dl>

Результат:

Тег
Тег — это ……..
HTML-документ
HTML-документ — это ……..
Сайт
Cайт — это ………

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

Создание нумерованных и маркированных списков без нумерации и маркирования

Если вам нужно убрать из списков номера и маркеры, то необходимо применить класс «list-unstyled» к тегам <ul> или <ol>.


<ul>
    <li>Элемент маркированного списка</li>
    <li>Элемент маркированного списка</li>
    <li>Элемент маркированного списка</li>
    <li>Элемент маркированного списка</li>
    <li>Элемент маркированного списка</li>
</ul>

Или


<ol>
    <li>Элемент нумерованного списка</li>
    <li>Элемент нумерованного списка</li>
    <li>Элемент нумерованного списка</li>
    <li>Элемент нумерованного списка</li>
    <li>Элемент нумерованного списка</li>
</ol>

Результат:

Элемент маркированного списка
Элемент маркированного списка
Элемент маркированного списка
Элемент маркированного списка
Элемент маркированного списка

Более сложный список с двойным уровнем


<ul>
    <li>Элемент маркированного списка</li>
    <li>Элемент маркированного списка</li>
    <li>Элемент маркированного списка
        <ul>
            <li>Элемент 2 уровня</li>
            <li>Элемент 2 уровня</li>
            <li>Элемент 2 уровня</li>
        </ul>
    </li>
    <li>Элемент маркированного списка</li>
    <li>Элемент маркированного списка</li>
</ul>

Результат:

Размещение нумерованных и маркированных списков в одну строку

Этот пример поможет вам создать горизонтальное меню из нумерованных или маркированных списков. Все элементы списка будут размешены горизонтально в одну строку, если вы примените класс «list-inline» к тегам <ul> или <ol>.


<ul>
  <li>Главная</li>
  <li>Портфолио</li>
  <li>Автор</li>
  <li>Контакты</li>
</ul>

Результат:

Создание горизонтальных списков определений

Можно список определений разместить в одну строку. Это, довольно таки, смотрится красиво. Убедитесь в этом сами, когда увидите результат.
Итак, чтобы разместить список определений в одну строку, примените класс «dl-horizontal» к  тегу <dl>:


<dl>
   <dt>HTML</dt>
     <dd>HTML –  (от англ. Hypertext Markup Language ) это язык разметки гипертекста. Он впервые был разработан британским учёным Тимом Бернерс-Ли (Tim Berners-Lee) в 1991—1992 годах.</dd>
   <dt>CSS</dt>
     <dd>CSS (Cascading Style Sheets) – это каскадные таблицы стилей, которые хранят в себе правила для группы или одиночного элемента. CSS используют для изменения внешнего вида дизайна сайта (цвет, размер текста, фон и др.).</dd>
   <dt>PHP</dt>
   <dd>PHP (Hypertext Preprocessor - Препроцессор Гипертекста) – один из самых лучших и легких языков программирования, специально разработанный для написания web-приложений и может внедряться в HTML-код.</dd>
</dl>

Результат:

Если вы будете смотреть список определений на маленьких экранах (ширина меньше 768px), горизонтальные списки определений поменяются на вертикальные (по умолчанию).

Создание групповых списков

Хорошая возможность создать красивое вертикальное меню.


<ul>
    <li>Главная</li>
    <li>Портфолио</li>
    <li>Автор</li>
    <li>Контакты</li>
</ul>

Результат:

Если добавить ссылки к элементам спискам, выйдет симпатичное меню, где при нажатии останется выделенное активное меню.


<ul>
    <a href="#"><li>Главная</li></a>
    <a href="#"><li>Портфолио</li></a>
    <a href="#"><li>Автор</li></a>
    <a href="#"><li>Контакты</li></a>
</ul>

Результат:

Если добавить к элементам списка иконки, выйдет еще более красивое меню, где при нажатии останется выделенное активное меню.


<ul>
    <a href="#"><li><span></span> Главная</li></a>
    <a href="#"><li><span></span> Портфолио</li></a>
    <a href="#"><li><span></span> Автор</li></a>
    <a href="#"><li><span></span> Контакты</li></a>
</ul>

Результат:

Все стили иконок glyphicon мы рассмотрим в других уроках.

Если заменить тег <ul> на тег <div>, а <li> на <a href>, то в итоге получится изящное адаптивное меню. Итак, код:


<div>
    <a href="#"><span></span> Главная<span>9</span></a>
    <a href="#"><span></span> Портфолио<span>24</span></a>
    <a href="#"><span></span> Автор<span>2</span></a>
    <a href="#"><span></span> Контакты<span>2</span></a>
</div>

Результат:

Я думаю, не стоит отходить от темы списков, а то я уже зацепил тему создания меню :mrgreen:. В следующих уроках вас ждет еще одна интересная тема. Не пропустите моих уроков по основам Фреймворка Twitter Bootstrap.
Удачи!!! 

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓


Последние новости категории:

Похожие статьи

Популярные статьи:

Добавить комментарий

Метки: Bootstrap, основы

Цвет маркеров ul отличный от текста

ВидHTML-кодCSS-кодОписание
☃☃\2603Снеговик
☦☦\2626Православный крест
⚓⚓\2693Якорь
➳➳\27B3Стрела направо
✆✆\2706Знак телефона
☕☕\2615Горячие напитки
✎✎\270EКарандаш, направленный вправо-вниз
✏✏\270FКарандаш
✐✐\2710Карандаш, направленный вправо-вверх
✑✑\2711Незакрашенное острие пера
✒✒\2712Закрашенное острие пера
⚜⚜\269CГеральдическая лилия
⛑⛑\26D1Шлем с белым крестом
⚝⚝\269DНачерченная белая звезда
❄❄\2744Снежинка
❤❤\2764Закрашенное жирное сердце
❅❅\2745Зажатая трилистниками снежинка
❆❆\2746Жирная остроугольная снежинка
★★\2605Закрашенная звезда
☆☆\2606Незакрашенная звезда
✪✪\272AНезакрашенная звезда в закрашенном круге
✫✫\272BЗакрашенная звезда с незакрашенным кругом внутри
✯✯\272FВращающаяся звезда
❉❉\2749Звёздочка с шарообразными окончаниями
❋❋\274BЖирная восьмиконечная каплеобразная звёздочка-пропеллер
✲✲\2732Звёздочка с незакрашенным центром
⍟⍟\235FApl функциональный символ звезда в круге
⊛⊛\229BОператор звездочки в круге
☀☀\2600Закрашенное солнце с лучами
☁☁\2601Облака
☂☂\2602Зонтик
☑☑\2611Галочка в квадрате
☒☒\2612Крестик в квадрате
☹☹\2639Нахмуренный смайлик
☺☺\263AУлыбающийся смайлик
☻☻\263BЗакрашенный улыбающийся смайлик
☭☭\262DСерп и молот
☰☰\2630Триграмма
✿✿\273fЗакрашенный цветок
❀❀\2740Незакрашенный цветок
✾✾\273EЦветок с шестью лепестками
❁❁\2741Закрашенный обведённый цветок
❂❂\2742Цветок из точек
✉✉\2709Конверт
❦❦\2766Сердце в виде цветка
❶❶\2776Номер 1
❷❷\2777Номер 2
❸❸\2778Номер 3
❹❹\2779Номер 4
❺❺\277AНомер 5
❻❻\277BНомер 6
❼❼\277CНомер 7
❽❽\277DНомер 8
➒➒\2792Номер 9
➓➓\2793Номер 10
➠➠\27A0Летящая стрела
➤➤\27A4Наконечник стрелы
➥➥\27A5Изогнутая стрела, указывающая вниз и вправо
➦➦\27A6Изогнутая стрела, указывающая вверх и вправо
❜❜\275CЖирная одинарная верхняя запятая
❛❛\275BЖирная одинарная повёрнутая верхняя запятая
✖✖\2716Жирный знак умножения
✘✘\2718Жирный крестик
✔✔\2714Жирная отметка галочкой
✚✚\271AЖирный крест
↺↺\21BAКруглая стрелка с наконечником против часовой стрелки
↻↻\21BBКруглая стрелка с наконечником против часовой стрелки
\003CЗнак «меньше чем» (начало тега)
>>\003EЗнак «больше чем» (конец тега)
««\00ABЛевая двойная угловая скобка
»»\00BBПравая двойная угловая скобка
‹‹\2039Левая угловая одиночная кавычка
››\203AПравая угловая одиночная кавычка
««\0022Двойная кавычка
′′\2032Одиночный штрих
″″\2033Двойной штрих
‘‘\2018Левая одиночная кавычка
’’\2019Правая одиночная кавычка
‚‚\201AНижняя одиночная кавычка
““\201CЛевая двойная кавычка
””\201DПравая двойная кавычка
„„\201EНижняя двойная кавычка
&&\0026Амперсанд
‘‘\0027Апостроф (одинарная кавычка)
§§\00A7Параграф
©©\00A9Знак copyright
¬¬\00ACЗнак отрицания
®®\00AEЗнак зарегистрированной торговой марки
¯¯\00AFЗнак долготы над гласным
°°\00B0Градус
±±\00B1Плюс-минус
¹¹\00B9Верхний индекс «1»
²²\00B2Верхний индекс «2»
³³\00B3Верхний индекс «3»
¼¼\00BCОдна четверть
½½\00BDОдна вторая
¾¾\00BEТри четверти
´´\00B4Знак ударения
µµ\00B5Микро
\00B6Знак абзаца
··\00B7Знак умножения
¿¿\00BFПеревернутый вопросительный знак
ƒƒ\0192Знак флорина
™™\2122Знак торговой марки
••\2022Маркер списка
……\2026Многоточие
‾‾\203EНадчеркивание
––\2013Среднее тире
——\2014Длинное тире
‰‰\2030Промилле
}}\007DПравая фигурная скобка
{{\007BЛевая фигурная скобка
==\003DЗнак равенства
≠≠\2260Знак неравенства
≅≅\2245Конгруэнтность (геометрическое равенство)
≈≈\2248Почти равно
≤≤\2264Меньше чем или равно
≥≥\2265Больше чем или равно
∠∠\2220Угол
⊥⊥\22A5Перпендикулярно (кнопка вверх)
√√\221AКвадратный корень
∑∑\2211N-ичное суммирование
∫∫\222BИнтеграл
←←\2190Стрелка влево
↑↑\2191Стрелка вверх
→→\2192Стрелка вправо
↓↓\2193Стрелка вниз
↔↔\2194Стрелка влево-вправо
↵↵\21B5Стрелка вниз и влево – знак возврата каретки
⇐⇐\21D0Двойная стрелка налево
⇑⇑\21D1Двойная стрелка вверх
⇒⇒\21D2Двойная стрелка направо
⇓⇓\21D3Двойная стрелка вниз
⇔⇔\21D4Двойная стрелка влево-вправо
¢¢\FFE0Цент
££\FFE1Фунт стерлингов
₽₽\20BDРоссийский рубль
¥¥\00A5Йена или юань
€€\20ACЕвро
$$\0024Доллар
₴₴\20B4Знак гривны
₹₹\20B9Индийская рупия
圓圓\5713Китайский юань
₸₸\20B8Казахстанский тенге

html — удалить точки из списка в CSS

html — удалить точки из списка в CSS — qaru

Присоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.

Спросил

Просмотрено 5к раз

На этот вопрос уже есть ответы здесь :

Закрыт 1 год назад.

Как убрать точку из «добавить рецепт»? при попытке не работает …

HTML:

css:

  #menu
ul> li
{
    тип-стиль-список: нет;
}

Создан 28 дек.

5

Если вы имеете в виду маркер «маркированного списка», то он работал, когда я запускал код, ничего не меняя.Вы уверены, что он не работает, когда вы его запускаете? Вы пробовали очистить кеш, чтобы убедиться, что старый скрипт не работает?

HTML:

  <тело>

CSS:

  ul li
{
    тип-стиль-список: нет;
}

Промывка

Добавьте .list-group-flush для удаления некоторых границ и закругленных углов для рендеринга элементов группы списков от края до края в родительском контейнере (например, в карточках).

  • Cras justo odio
  • Dapibus ac facilisis in
  • Морби лев рис
  • Porta ac Concectetur AC
  • Вестибулум на эросе
  
    
  
  •  Cras justo odio 
    • 
  
  •  Dapibus ac facilisis в 
    • 
  
  •  Morbi leo risus 
    • 
  
  •  Porta ac Concectetur AC 
    • 
  
  •  Вестибулум на Эросе. 
    •

Контекстные классы

Используйте контекстные классы для стилизации элементов списка с фоном и цветом с отслеживанием состояния.

  • Dapibus ac facilisis in
  • Это основной элемент группы списка
  • Это дополнительный элемент группы списка
  • Это элемент группы успешного списка
  • Это элемент группы списка опасностей
  • Это элемент группы списка предупреждений
  • Это элемент группы информационного списка
  • Это элемент группы светового списка
  • Это элемент группы темного списка
  
    
  
  •  Dapibus ac facilisis в 
    • 

  
  
  •  Это основной элемент группы списка. 
    • 
  
  •  Это дополнительный элемент группы списка. 
    • 
  
  •  Это элемент группы успешного списка. 
    • 
  
  •  Это элемент группы списка опасностей. 
    • 
  
  •  Это элемент группы списка предупреждений. 
    • 
  
  •  Это элемент группы информационного списка. 
    • 
  
  •  Это элемент группы облегченного списка. 
    • 
  
  •  Это элемент группы темного списка. 
    •

Контекстные классы также работают с .список-группа-элемент-действие . Обратите внимание на добавление стилей наведения, которых не было в предыдущем примере. Также поддерживается состояние .активное ; примените его, чтобы указать активный выбор в элементе группы контекстного списка.
Передача смысла вспомогательным технологиям

Использование цвета для добавления смысла обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана.Убедитесь, что информация, обозначенная цветом, либо очевидна из самого содержимого (например, видимый текст), либо включена с помощью альтернативных средств, таких как дополнительный текст, скрытый с помощью класса .sr-only .

со значками

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

  • Cras Justo Odio 14
  • Dapibus ac facilisis в 2
  • Morbi leo risus 1
  
    
  
  • 
    Cras Justo Odio
     14 
  
    • 
  
  • 
    Dapibus ac facilisis в
     2 
  
    • 
  
  • 
    Morbi leo risus
     1 
  
    •

Пользовательское содержимое

Добавьте практически любой HTML-код внутри, даже для групп связанных списков, подобных приведенной ниже, с помощью утилит flexbox.

Поведение JavaScript

Используйте подключаемый модуль JavaScript вкладки — включите его отдельно или через скомпилированный загрузочный файл .js — чтобы расширить нашу группу списков для создания вкладок локального содержимого.

Velit aute mollit ipsum ad dolor conctetur nulla officia culpa adipisicing упражнения fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate grant occaecat nisi ad non minim tempor sunt voluptate Conctetur упражнение id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt conctetur culpa aliquip eiusmod dolor.Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.

Cupidatat quis ad sint excepteur Laborum in esse qui. Et excepteur conctetur ex nisi eu do cillum ad Laborum. Mollit et eu officia dolore sunt Lorem culpa qui normo velit ex amet id ex. Officia anim incididunt labouris deserunt anim aute dolor incididunt veniam aute dolore делать упражнения. Dolor nisi culpa ex ad irure in elit eu dolore. Ad labouris ipsum REPREHENDERIT irure non Commodo enim culpa Commodo Veniam incididunt veniam ad.

Выполнение упражнений pariatur aliquip aliqua aliquip do nostrud Commodo Prerehenderit aute ipsum voluptate. Irure Lorem et labouris nostrud amet cupidatat cupidat anim do ut velit mollit consquat enim tempor. Consectetur est minim nostrud nostrudconctetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla Laborum elit adipisicing pariatur cillum.

Irure enim occaecat labore sit qui aliquip REPREHENDERIT Amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat labouris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut упражнение irure cargo non amet conctetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.

Использование атрибутов данных

Вы можете активировать навигацию по группам списка без написания кода JavaScript, просто указав data-toggle = "list" или в элементе.Используйте эти атрибуты данных в .list-group-item .

  





  
... 

  
 ... 

  
 ... 

  
 ...

Через JavaScript

Включить элемент списка с вкладками через JavaScript (каждый элемент списка необходимо активировать индивидуально):

  $ ('# myList a'). On ('click', function (e) {
  e.preventDefault ()
  $ (это) .tab ('показать')
})

Активировать отдельный элемент списка можно несколькими способами:

  $ ('# myList a [href = "# profile"]').tab ('show') // Выбираем вкладку по имени
$ ('# myList a: first-child'). tab ('show') // Выбрать первую вкладку
$ ('# myList a: last-child'). tab ('show') // Выбрать последнюю вкладку
$ ('# myList a: nth-child (3)'). tab ('show') // Выбрать третью вкладку

Эффект затухания

Чтобы панель вкладок постепенно увеличивалась, добавьте .fade к каждой .tab-pane . На первой панели вкладок также должно быть .show , чтобы исходное содержимое было видимым.

  

  
 ... 

  
... 

  
 ... 

  
 ...

Методы

$ (). Вкладка

Активирует элемент элемента списка и контейнер содержимого. Вкладка должна иметь цель data-target или href , нацеленную на узел контейнера в DOM.

  



  
... 

  
 ... 

  
 ... 

  
 ... 




<сценарий>
  $ (function () {
    $ ('# myList a: last-child'). tab ('показать')
  })
.tab («показать»)

Выбирает указанный элемент списка и показывает связанную с ним панель. Любой другой элемент списка, который был ранее выбран, становится невыделенным, а связанная с ним панель скрывается. Возврат к вызывающему абоненту до фактического отображения панели вкладок (например, до отображения .bs.tab происходит событие).

  $ ('# someListItem'). Tab ('show')

События

При отображении новой вкладки события запускаются в следующем порядке:

  1. hide.bs.tab (на текущей активной вкладке)
  2. show.bs.tab (на вкладке для показа)
  3. hidden.bs.tab (на предыдущей активной вкладке такая же, как для события hide.bs.tab )
  4. shown.bs.tab (на только что активной только что активной вкладке такая же, как для шоу .bs.tab событие)

Если ни одна вкладка еще не была активна, события hide.bs.tab и hidden.bs.tab запускаться не будут.

Показано
Тип события Описание
show.bs.tab Это событие запускается при отображении вкладки, но до отображения новой вкладки. Используйте event.target и event.relatedTarget для таргетинга на активную вкладку и предыдущую активную вкладку (если таковая имеется) соответственно.
.bs.tab Это событие запускается при отображении вкладки после того, как вкладка была показана. Используйте event.target и event.relatedTarget для таргетинга на активную вкладку и предыдущую активную вкладку (если таковая имеется) соответственно.
hide.bs.tab Это событие возникает, когда должна быть показана новая вкладка (и, следовательно, предыдущая активная вкладка должна быть скрыта). Используйте event.target и event.relatedTarget для таргетинга на текущую активную вкладку и новую вкладку, которая скоро станет активной, соответственно.
hidden.bs.tab Это событие возникает после отображения новой вкладки (и, таким образом, предыдущая активная вкладка скрыта). Используйте event.target и event.relatedTarget для нацеливания на предыдущую активную вкладку и новую активную вкладку соответственно.
  $ ('a [data-toggle = "list"]'). On ('shown.bs.tab', function (e) {
  e.target // недавно активированная вкладка
  e.relatedTarget // предыдущая активная вкладка
})

Списки «Fixing» | скоттохара.мне

В сентябре 2017 года Джерард К. Коэн из Unfettered Thinkts опубликовал статью о том, как VoiceOver и Safari (Webkit) (macOS и iOS) удаляют семантику элементов списка при использовании list-style: none . Он не просто использует стиль списка : none , но и любой CSS, который удаляет маркеры или числовые индикаторы элементов списка, также удаляет семантику.

Это не единственный пример того, как CSS изменяет представление элементов вспомогательным технологиям, например программам чтения с экрана.Изменение видимости отображения и на «нет» или «скрыто», соответственно, не только визуально скроет контент, но и уберет элементы, которые будут открыты для API специальных возможностей. Однако там, где эти свойства будут последовательно скрывать и отображать контент для всех пар браузеров и программ чтения с экрана, этот пример изменения стиля списка уникален для Safari / Webkit.

Почему Webkit - единственный движок браузера, который ведет себя подобным образом?

Когда ошибка - это функция, это ошибка?

В марте 2017 года была обнаружена ошибка в отношении стиля списка : ни один не влиял на семантику открытого списка.В конце концов, он вызвал ответ:

.

Это было целенаправленное изменение, вызванное безудержным «списком» веб-разработчиков. … По сути, если вы удалите все видимые индикаторы списка по умолчанию, зрячему пользователю или пользователю программы чтения с экрана не будет никаких указаний на то, что содержимое является списком. Если вы хотите переопределить эту эвристику для обеспечения доступности, вы всегда можете добавить явный ARIA role = ”list”.

Я могу понять это рассуждение. Семантика сложна, и люди часто злоупотребляют HTML, всегда и навсегда.Противоположным моментом здесь является то, что существуют допустимые сценарии, в которых можно удалить стиль по умолчанию для списка, но при этом он будет отображаться в виде списка. Особенно, если этот список изменен таким образом, что он по-прежнему визуально выглядит как список.

К сожалению, лучшее решение этой проблемы противоречит первому правилу использования ARIA, которое гласит:

Если вы можете использовать собственный HTML-элемент или атрибут с семантикой и поведением, которые вам требуются , уже встроенным в , вместо изменения назначения элемента и добавления роли, состояния или свойства ARIA, чтобы сделать его доступным, , тогда сделайте это .

Другой отрывок из Использование ARIA:

Ни один из элементов, определенных в HTML4, не требует добавления ролей ARIA для раскрытия их семантики по умолчанию. … В большинстве случаев установка роли ARIA и / или атрибута aria- *, которые соответствуют неявной семантике ARIA по умолчанию, не требуется и не рекомендуется, поскольку эти свойства уже установлены браузером.

Это постоянная борьба за обучение разработчиков, плохо знакомых с доступностью, что им «не нужно использовать атрибуты ARIA, если они использовали соответствующие элементы HTML.”В подобных ситуациях требуется предостережение:

«За исключением , нужно использовать ARIA для повторного присоединения семантики списка для этой конкретной комбинации браузера и программы чтения с экрана.

Нет, вам не нужно делать это для других браузеров и комбинаций программ чтения с экрана.

Нет, этого не происходит с Chrome (Blink) и VoiceOver.

Нет, вам просто нужно игнорировать предупреждения, которые выдают ваши автоматические средства проверки, в которых говорится: «Не дублируйте роли ARIA над их эквивалентами нативных элементов».

Нет, это «исправление» не требуется для Internet Explorer… »

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

Исправление для исправления

Ранее (до обновления этой публикации в ноябре 2019 года) в этом разделе описывались некоторые хаки, которые можно было сделать с псевдоэлементами CSS :: before , чтобы заставить Webkit восстанавливать семантику списка при удалении их маркеров списка.

С тех пор, как были написаны исходная статья Unfettered Мысли и этот пост, некоторые вещи изменились в том, как хаки CSS повлияли на то, как VoiceOver объявляет списки, содержащие только статический текст.

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

Более подходящим и прямым способом повторного добавления семантики списка (если даже необходимо) было бы следующее:

  
      ->
  
  • ... 
    • 
  
  •  ... 
    • 
  
  •  ... 
    •

Как отмечает Адриан Роселли в Твиттере, отсутствие семантики списков «… может не иметь большого значения, если пользовательское тестирование не покажет, что действительно нужен список». Хотя такое поведение может быть нежелательным в некоторых ситуациях, давайте также не будем тратить слишком много усилий на исправление чрезмерной коррекции, которая была вызвана чрезмерным использованием ненужной семантики.

Проведите тестирование на реальных людях!

Завершение

Я здесь немного разорван.Решение удалить семантику списка, если список больше не оформлен так, чтобы он выглядел как список, имеет смысл ... Обычно я считаю, что важно, чтобы элементы выглядели так, как они есть. Но такое общее решение может выйти на некоторую территорию. Это также не учитывает тот факт, что есть другие способы визуальной интерпретации списков, кроме того, если они имеют маркеры списка по умолчанию, такие как маркеры. Итак, хотя я понимаю это решение, я не полностью согласен с подходом Webkit.

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

Особенно, если принять во внимание вещи, о которых я говорил в своем посте «Отключение кнопок» и Адриан Роселли в своих статьях «Отображение: содержимое не является сбросом CSS» и таблицами, свойствами отображения CSS и ARIA. CSS может оказывать вредное влияние на то, как HTML-элементы отображаются в API специальных возможностей браузера, и разработчики не могут быть в этом мудрее.

Просто ознакомьтесь с множеством ответов, ретвитов и лайков на твит Сары Суайдан:

#TIL, при котором удаление маркеров списка с помощью `list-style: none` удаляет семантику

    в VoiceOver.
    Добавление пробела нулевой ширины исправляет это; так что это еще одна вещь, которую нужно добавить в наши базовые файлы #CSS. # a11y https://t.co/NOpyZneSYc

    через @scottohara @rogerjohansson

    - Сара Суайдан (@SaraSoueidan) 11 января 2019 г.

Было много фронтенд-разработчиков и даже тех, кто специально ориентировался на доступность, но не подозревал об этом поведении в Safari.

Как восклицает Эрик Эггерт:

Нам действительно нужен открытый разговор о том, каким CSS разрешено перезаписывать семантику. Помимо display: none / visibility: hidden, я лично считаю, что никакой CSS не должен изменять семантику страницы.

- Эрик Эггерт (@yatil) 11 января 2019 г.

и как Джеймс Крейг отвечает на вышеупомянутую ветку:

Это решение было принято с учетом опыта пользователей на большинстве страниц, на которых веб-разработчики не обращают внимания на возможности чтения с экрана.Определенно открыты для внесения предложений по изменению (включая обновление эвристики), которые улучшат работу авторов без наказания пользователей.

- Джеймс Крейг (@cookiecrook) 12 января 2019 г.

Так что отзывы приветствуются 🙂

Как поменять маркированные списки на галочки или другие значки в Divi

Как поменять маркированные списки на галочки или другие значки в Divi

Вот краткое руководство по Divi, показывающее, как легко преобразовать маркированные списки в контрольные списки и другие значки с помощью нескольких простых фрагментов CSS.

Категории: Избранные учебники

Заменить пули значками

Превратите пули в галочки в Divi

Возможно, вы заметили, что мы иногда используем контрольные списки здесь, в блоге, и в наших дочерних темах для продажи. Я решил показать вам, насколько легко в Divi поменять маркированные списки на галочки с помощью всего нескольких фрагментов кода CSS, которые вы можете использовать глобально на своем веб-сайте Divi.

Как использовать фрагменты CSS

1. Добавьте класс CSS в текстовый модуль

Добавьте текстовый модуль в свой макет.

Откройте настройки текстового модуля.

На вкладке «Содержимое» создайте список маркеров.

Перейдите на вкладку «Дополнительно» .

Откройте «Идентификатор и классы CSS» переключите

Добавьте класс «pa-bullet-list-1» в «Класс CSS» (измените номер класса на 2 в зависимости от того, какой фрагмент вы используете ниже)

2.Вставьте приведенные ниже фрагменты CSS в свой Divi> Параметры темы> Пользовательское поле CSS

Если вы используете нашу бесплатную дочернюю тему Divi , поместите этот фрагмент в файл style.css . В противном случае поместите его в поле Divi> Параметры темы> Пользовательский код CSS . Если вам нужна помощь, ознакомьтесь с нашим полным руководством по Куда добавить собственный код в Divi .

Круглая галочка

  • Это отличные
  • Они красиво выглядят
  • Они нравятся людям
  • Их легко сделать
  / * маркированный контрольный список www.peeayecreative.com * /
.pa-bullet-list-1 ul {
тип-стиль-список: нет! важно;
}

.pa-bullet-list-1 ul li: before {
content: '\ e052'! important;
цвет: # 2cba6c;
семейство шрифтов: 'ETMODULES'! important;
маржа справа: 10 пикселей;
маржа слева: -14 пикселей;
размер шрифта: 1.2em! важно;
}

Круг X

  • Это отличные
  • Они красиво выглядят
  • Они нравятся людям
  • Их легко сделать
  / * список пуль по www.peeayecreative.com * /
.pa-bullet-list-2 ul {
тип-стиль-список: нет! важно;
}

.pa-bullet-list-2 ul li: before {
content: '\ e051'! important;
цвет: # e03574! important;
семейство шрифтов: 'ETMODULES'! important;
маржа справа: 10 пикселей;
маржа слева: -14 пикселей;
размер шрифта: 1.2em! важно;
}

Как изменить нашу галочку, чтобы сделать свой собственный список маркеров в Divi

Когда у вас есть базовый код, приведенный выше, вы можете использовать любой значок, который вам нужен.Значки, которые я использую здесь, представляют собой значки ETModules, которые входят в стандартную комплектацию Divi, и вы можете просмотреть список и бесплатно загрузить их из их блога. Остальная часть этого урока будет простым примером того, как добавлять другие значки по вашему выбору.

После того, как вы скопировали код из нужного значка, вам нужно будет найти исходный код в первом фрагменте, указанном выше, и заменить его. В этом примере используется & # xe52 (галочка). ПРИМЕЧАНИЕ: Всегда снимайте & # x .

43 год

Последнее обновление: 22 янв.2021 в 22:37

Вот и все!

Надеюсь, вам понравилось узнать, как в Divi поменять маркированный список на галочки или другие значки. Поделитесь своими мыслями в комментариях ниже. Если вы найдете ценность в этом типе сообщений, , пожалуйста, подпишитесь на , потому что у нас есть тонны обучающих программ , которые нужно опубликовать!

Мы выпускаем полное руководство каждый вторник! Мы также выпускаем другие полезные советы, бесплатные подарки и ресурсы в течение недели.Этот список адресов электронной почты будет отправлен вам по электронной почте, когда мы опубликуем новую запись в блоге.

Нельсон - владелец компании Pee-Aye Creative Co в прекрасном штате Пенсильвания. Он любит помогать малому бизнесу, исследовать, создавать веб-сайты с Divi и обучать других.

Оставить отзыв!

Комментируя, вы соглашаетесь с нашей Политикой в ​​отношении комментариев для блогов и YouTube.

Один или два раза в месяц мы рассылаем сводку по электронной почте с обучающими материалами и новыми продуктами, так что вы получите именно это!

{"id": null, "mode": "button", "open_style": "in_modal", "currency_code": "USD", "currency_symbol": "$", "currency_type": "decimal", "blank_flag_url" ":" https: \ / \ / www.peeayecreative.com \ / wp-content \ / plugins \ / tip-jar-wp \ / \ / assets \ / images \ / flags \ /blank.gif "," flag_sprite_url ":" https: \ / \ / www.peeayecreative .com \ / wp-content \ / plugins \ / tip-jar-wp \ / \ / assets \ / images \ / flags \ /flags.png "," default_amount ": 500," top_media_type ":" none "," Feature_image_url ": false," Feature_embed ":" "," header_media ": null," file_download_attachment_data ": null," recurring_options_enabled ": true," recurring_options ": {" never ": {" selected ": true," after_output ": "Только один раз"}, "еженедельно": {"selected": false, "after_output": "каждую неделю"}, "ежемесячно": {"selected": false, "after_output": "каждый месяц"}, " ежегодно ": {" selected ": false," after_output ":" Каждый год "}}," strings ": {" current_user_email ":" "," current_user_name ":" "," link_text ":" Оставить отзыв ", "complete_payment_button_error_text": "Проверьте информацию и попробуйте еще раз", "payment_verb": "Pay", "payment_request_label": "Pee-Aye Creative", "form_has_an_error": "Пожалуйста, проверьте и исправьте ошибки выше", "general_server_error": " Что-то сейчас не работает.Повторите попытку. "," Form_title ":" Pee-Aye Creative "," form_subtitle ": null," currency_search_text ":" Страна или валюта здесь "," other_payment_option ":" Другой способ оплаты "," manage_payments_button_text ":" Управление ваши платежи "," thank_you_message ":" Спасибо за поддержку! Неделя за неделей нас поддерживают такие люди, как вы! "," Payment_confirmation_title ":" Pee-Aye Creative "," Receipt_title ":" Ваша квитанция "," print_receipt ":" Распечатать квитанцию ​​"," email_receipt ":" Электронная почта Квитанция "," email_receipt_sending ":" Квитанция об отправке... "," email_receipt_success ":" Квитанция по электронной почте успешно отправлена ​​"," email_receipt_failed ":" Не удалось отправить квитанцию ​​по электронной почте. Повторите попытку. "," Receive_payee ":" Paid to "," receive_statement_descriptor ":" Это будет отображаться в вашей выписке как "," Receive_date ":" Date "," receive_transaction_id ":" Transaction ID "," Receaction_transaction_amount " : "Amount", "Refund_payer": "Refund from", "login": "Войдите, чтобы управлять своими платежами", "manage_payments": "Manage Payments", "transaction_title": "Your Transactions", "transaction_title": " Квитанция о транзакции "," transaction_period ":" Период действия плана "," scheme_title ":" Ваши планы "," scheme_title ":" Управление планом "," scheme_details ":" Сведения о плане "," scheme_id_title ":" Идентификатор плана "," scheme_payment_method_title ":" Способ оплаты "," scheme_amount_title ":« Сумма плана »,« scheme_renewal_title »:« Дата следующего продления »,« scheme_action_cancel »:« Отмена плана »,« scheme_action_cant_cancel »:« Отмена в настоящее время недоступна."," scheme_action_cancel_double ":" Вы уверены, что хотите отменить? "," scheme_cancelling ":" Отмена плана ... "," scheme_cancelled ":" План отменен "," scheme_failed_to_cancel ":" Не удалось отменить план " , "back_to_plans": "\ u2190 Вернуться к планам", "update_payment_method_verb": "Обновить", "sca_auth_description": "У вас есть ожидающий платеж за продление, требующий авторизации.", "sca_auth_verb": "Авторизовать платеж за продление", "sca_authing_verb ":" Авторизация платежа "," sca_authed_verb ":" Платеж успешно авторизован! "," Sca_auth_failed ":" Авторизация невозможна! Пожалуйста, попробуйте еще раз."," login_button_text ":" Войти "," login_form_has_an_error ":" Пожалуйста, проверьте и исправьте ошибки выше "," uppercase_search ":" Search "," lowercase_search ":" search "," uppercase_page ":" Page "," lowercase_page ":" page "," uppercase_items ":" Items "," lowercase_items ":" items "," uppercase_per ":" Per "," lowercase_per ":" per "," uppercase_of ":" Of "," lowercase_of " : "of", "back": "Вернуться к планам", "zip_code_placeholder": "Zip \ / Почтовый индекс", "download_file_button_text": "Загрузить файл", "input_field_instructions": {"tip_amount": {"placeholder_text": «Сколько бы вы хотели дать чаевых?», «Initial»: {"struction_type ":" normal ", "struction_message": "Сколько вы хотите давать чаевые? Выбирайте любую валюту."}," пусто ": {" тип_инструкции ":" ошибка "," сообщение_инструкции ":" Сколько вы хотите дать чаевые? Выберите любую валюту. "}," Invalid_curency ": {"struction_type": "error", "struction_message ":" Выберите допустимую валюту. "}}," Повторяющийся ": {" placeholder_text ":" Повторяющийся "," начальный ": {" тип_инструкции ":" нормальный "," сообщение_инструкции ":" Как часто вы хотели бы это делать? "}," успех ": {" тип_инструкции ":" успех "," сообщение_инструкции ":" Как часто вы будете хотите дать это? "}," empty ": {"struction_type": "error", "struction_message ":" Как часто вы хотели бы это делать? "}}," name ": {" placeholder_text ":" Имя по кредитной карте "," initial ": {"struction_type": "normal", "struction_message ":" Введите имя, указанное на вашей карте."}," успех ": {" тип_инструкции ":" успех "," сообщение_инструкции ":" Введите имя на вашей карте. "}," пустой ": {" тип_инструкции ":" ошибка "," сообщение_инструкции ":" Пожалуйста введите имя на своей карточке. "}}," privacy_policy ": {" terms_title ":" Условия использования "," terms_body ": null," terms_show_text ":" Просмотреть условия "," terms_hide_text ":" Скрыть условия ", "начальный": {"тип_ инструкции": "нормальный", "сообщение_инструкции": "я согласен с условиями"}, "не отмечен": {"тип_ инструкции": "ошибка", "сообщение_инструкции": "пожалуйста, примите условия ."}," проверено ": {" тип_инструкции ":" успех "," сообщение_инструкции ":" Я согласен с условиями. "}}," электронная почта ": {" текст-заполнителя ":" Ваш адрес электронной почты "," начальный ": {"тип_инструкции": "нормальный", "сообщение_инструкции": "Введите свой адрес электронной почты"}, "успех": {"тип_инструкции": "успех", "сообщение_инструкции": "Введите свой адрес электронной почты"}, "пусто": {"тип_инструкции": "ошибка", "сообщение_инструкции": "Введите свой адрес электронной почты"}, "не_адрес_почты_почты": {"тип_инструкции": "ошибка", "сообщение_инструкции": "Убедитесь, что вы ввели действительный адрес электронной почты"} }, "note_with_tip": {"placeholder_text": "Ваша заметка здесь... "," начальный ": {" тип_инструкции ":" нормальный "," сообщение_инструкции ":" Прикрепите примечание к своей подсказке (необязательно) "}," пусто ": {" тип_инструкции ":" нормальный "," сообщение_инструкции " : "Прикрепите примечание к совету (необязательно)"}, "not_empty_initial": {"command_type": "normal", "struction_message ":" Приложите примечание к совету (необязательно) "}," save ": {" тип_инструкции ":" нормальный "," сообщение_инструкции ":" Сохранение примечания ... "}," успех ": {" тип_инструкции ":" успех "," сообщение_инструкции ":" Примечание успешно сохранено! "}," ошибка ": { "тип_инструкции": "ошибка", "сообщение_инструкции": "Невозможно сохранить примечание примечания в это время.Повторите попытку. "}}," Email_for_login_code ": {" placeholder_text ":" Ваш адрес электронной почты "," initial ": {"struction_type": "normal", "struction_message ":" Введите адрес электронной почты, чтобы войти в систему. "} , "успех": {"тип_инструкции": "успех", "сообщение_инструкции": "Введите адрес электронной почты для входа."}, "пустой": {"тип_инструкции": "ошибка", "сообщение_инструкции": "Введите адрес электронной почты для входа. "}," empty ": {"struction_type": "error", "struction_message ":" Введите адрес электронной почты, чтобы войти в систему. "}}," login_code ": {" initial ": {"struction_type": "normal", "struction_message ":" Проверьте свою электронную почту и введите код для входа."}," успех ": {" тип_инструкции ":" успех "," сообщение_инструкции ":" Проверьте свою электронную почту и введите код входа. "}," пусто ": {" тип_инструкции ":" ошибка "," сообщение_инструкции ": "Проверьте свою электронную почту и введите код входа."}, "Empty": {"struction_type ":" error ", "struction_message": "Проверьте свою электронную почту и введите код входа."}}, "Stripe_all_in_one": {" initial ": {"struction_type": "normal", "struction_message ":" Введите здесь данные вашей кредитной карты. "}," empty ": {"struction_type": "error", "struction_message ":" Введите данные вашей кредитной карты здесь."}," успех ": {" тип_инструкции ":" нормальный "," сообщение_инструкции ":" Введите здесь данные своей кредитной карты. "}," недопустимое_число ": {" тип_инструкции ":" ошибка "," сообщение_инструкции ":" номер карты не является действительным номером кредитной карты. "}," invalid_expiry_month ": {"struction_type": "error", "struction_message ":" Срок действия карты недействителен. "}," invalid_expiry_year ": {"struction_type": "error", "struction_message ":" Срок действия карты недействителен. "}," invalid_cvc ": {" command_type ":" error ", "struction_message": "Код безопасности карты недействителен."}," неверное_число ": {" тип_инструкции ":" ошибка "," сообщение_инструкции ":" Неверный номер карты. "}," неполное_число ": {" тип_инструкции ":" ошибка "," сообщение_инструкции ":" карточка номер неполный. "}," incomplete_cvc ": {" тип_инструкции ":" ошибка "," сообщение_инструкции ":" Код безопасности карты неполный. "}," неполное_экспири ": {" тип_инструкции ":" ошибка "," сообщение_инструкции ":" Срок действия карты неполный. "}," Incomplete_zip ": {" command_type ":" error ", "struction_message": "Почтовый индекс карты не указан."}," expired_card ": {" statement_type ":" error ", "struction_message": "Срок действия карты истек."}, "invalid_cvc": {"struction_type ":" error ", "struction_message": "Безопасность карты неверный код. "}," неверный_zip ": {" тип_инструкции ":" ошибка "," сообщение_инструкции ":" Не удалось проверить почтовый индекс карты. "}," недействительный_expiry_year_past ": {" тип_инструкции ":" ошибка "," сообщение_инструкции ":" Срок действия карты истек "}," card_declined ": {"struction_type": "error", "struction_message ":" Карта отклонена."}," пропущен ": {" тип_инструкции ":" ошибка "," сообщение_инструкции ":" У клиента нет карты, с которой производится оплата. "}," ошибка_обработки ": {" тип_инструкции ":" ошибка "," инструкция_message ":" Произошла ошибка при обработке карты. "}," invalid_request_error ": {" statement_type ":" error ", "struction_message": "Невозможно обработать этот платеж, попробуйте еще раз или используйте альтернативный метод."}, "invalid_sofort_country": {"struction_type ":" error ", "struction_message": "SOFORT не принимает страну выставления счета.Попробуйте другую страну. "}}}}," Fetched_oembed_html ": false}

{" date_format ":" F j, Y "," time_format ":" g: ia "," wordpress_permalink_only ":" https: \ / \ /www.peeayecreative.com \ / change-bullet-lists-into-check-mark-in-divi \ / "," all_default_visual_states ":" наследовать "," modal_visual_state ": false," user_is_logged_in ": false," stripe_api_key ":" pk_live_51EARn4E3j6GcARDR3oo6L91XPb3rfnNl9j6ieomgjlZjVvj7nCzKCTphxwu38s20syRaBKveuT5NFmm4fZqUHOPe00fugbEkRDc ", https://support.