Используйте & middot; вместо пули за <ul> - PullRequest
Новая
       3

Используйте & middot; вместо пули за <ul>

21 голосов
/ 18 ноября 2011

Я нашел статью о свойстве list-style-type в CSS, но в нем нет & middot; (& middot;) в качестве опции, в отличие от значения по умолчанию disc или & bullet; (& Пули;). Есть ли способ сделать это с помощью HTML или CSS?

Ответы [ 6 ]

60 голосов
/ 18 ноября 2011

CSS (работает в любом браузере, поддерживающем :before и content:): 

li:before { 
    content: '\b7\a0'; /* \b7 is a middot, \a0 is a space */
}
li {
    list-style:none;
    text-indent:-.5em; /* helps make it look more like it's a bullet. */
}

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

Другая реализация: 

li:before {
    content: '\b7\a0';
    position:absolute;
    right:100%
}
li {
    list-style:none;
    position:relative;
}

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

3 голосов
/ 18 ноября 2011

Да! Вы можете использовать псевдокласс before для вставки символа перед каждым элементом. 

.DotList li:before
{
    content: "·";
}

Здесь является примером jsFiddle.

2 голосов
/ 18 ноября 2011

list-style-type не выбирает какой символ использовать, он выбирает абстрактный маркер для использования. Обратите внимание на стандартные состояния:

Значение «none» не указывает маркера, в противном случае существует три типа маркеров: глифы, системы нумерации и буквенные системы.

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

Для большего контроля над маркером вы должны либо установить изображение, используя list-style-image, либо использовать псевдоэлемент :before и content свойство, устанавливая list-style-type в «none». :before и свойство content не поддерживаются в IE 7 и более ранних версиях, поэтому вы должны либо использовать list-style-image для поддержки IE 7, либо просто позволить IE 7 использовать другой маркер. Вы можете использовать условные комментарии для IE 7 и более ранних версий.

1 голос
/ 18 ноября 2011

Существует ограниченное количество доступных опций для list-style-type, которые определены в спецификации CSS2 .

Вы можете использовать:

  • диск
  • круг
  • квадрат
  • десятичное 1015 *
  • десятичное ведущий-ноль
  • нижний романский
  • верхний Roman
  • нижний греческий
  • нижняя латынь
  • верхний латынь
  • армянин
  • 1031 * грузинский * * * +1032 ниже-альфа * * 1 033 * * +1034 верхнего альфа
  • нет

Если вы хотите что-то нестандартное, используйте свойство list-style-image

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

li:before {
  content: '\[utf-8 hex code for character]';
  position: absolute;
  right: 100%;
}

li {
  position: relative;
}
1 голос
/ 18 ноября 2011

Вы можете использовать фоновое изображение в LI

Один из возможных примеров
http://css.maxdesign.com.au/listamatic/vertical05.htm

0 голосов
/ 11 сентября 2017

Вместо li:before, который влияет на все li (в меню, вкладках, аккордеоне) на странице, я использовал это: 

ul {
	list-style: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAHCAMAAAAYuxziAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABhQTFRF////cmpmZmZm+MGYqNP/Zmt/06N6j7j/ImXnGgAAABpJREFUeNpiYAABZkZWFgY2JiZ2CAsVAAQYAAPiACwnaqqBAAAAAElFTkSuQmCC');
}
  
<ul>
  <li>This is my middot</li>
</ul>
...