it-swarm.com.ru

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

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

21
steveo225

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 для добавления дополнительных вещей, таких как границы, но если вы добавляете маркер, я думаю, что это не так. Несмотря на то, что это альтернативное предложение, оно, вероятно, является предпочтительным.

60
Levi Morrison

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

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

Здесь это пример jsFiddle.

3
Maxpm

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 и более ранних версий.

2
outis

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

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

1
Brian Hoover

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

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

  • диск
  • круг
  • площадь
  • десятичный
  • десятичное ведущий нуля
  • низший романский
  • верхняя-римской
  • низший греческий
  • ниже латынь
  • верхняя латынь
  • армянин
  • грузинский
  • низший-альфа
  • верхняя-альфа
  • none

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

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

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

li {
  position: relative;
}
1
zzzzBov

Вместо 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>

0
M.S.