HTML списки с конкретными символами? - PullRequest
Новая
       18

HTML списки с конкретными символами?

1 голос
/ 27 апреля 2010

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

\> one  
\> two  
\> three


♦ one  
♦ two  
♦ three

без использования url ()?

Ответы [ 2 ]

7 голосов
/ 27 апреля 2010

Использовать li: до 

<style>
ul {    list-style: none;   }
li:before { content: '> '}
</style>
<ul>
<li>xyz</li>
</ul>
3 голосов
/ 27 апреля 2010

Я модернизировал существующий ответ, как вы делаете это полностью BTB. Чтобы он работал в IE 6-7, вам нужно растеризовать нужный маркер элемента и сделать что-то вроде этого: 

li {
  list-style-type: none;
  margin-left: 0;
  padding-left: $length;
  background-image: url($image);
  background-repeat: no-repeat;
}

... где $length - совокупная ширина вашего растрового маркера элемента списка и желаемое отрицательное пространство между элементом списка и фоновым изображением. В свою очередь, $image является действительным URI растрированного маркера. Также может быть желательно значение background-position.

Существует также list-style-image (который выполняет работу всех свойств, использованных выше), но он несет в себе одну очень большую оговорку: отрицательное пространство, которое вы хотите вокруг изображения, должно быть предоставлено в изображении требование, которое несет свою долю ошибок.

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

...