2013-09-16 5 views
-1

Привет Я пытаюсь добавить все свойства li, которые находятся в одной ul.Добавление всех свойств li

HTML: 

<ul> 

<li>Sample Li to have all the properties</li> 

</ul> 

CSS: 

ul li{ 
    list-style-type : disc | circle | lower-aplha etc..., 
} 

Можно ли добавить?

+2

Вы хотите увидеть диск ** и ** круг ** и ** нижний альфа? – Itay

+0

Я не знаю, можете ли вы использовать одну ul, но вы можете сделать следующее: http: //jsfiddle.net/qhgyR/ – Conqueror

ответ

3

Можно с помощью CSS counters.

ul { 
    counter-reset: my-counter; 
    list-style-type: none; 
} 
ul li:before { 
    content: counter(my-counter, disc) 
      counter(my-counter, circle) 
      counter(my-counter, lower-alpha) "." 
      counter(my-counter, decimal) "."; 
      /* etc... */ 
    counter-increment: my-counter; 
} 

jsFiddle Demo

Result


Доступные типы списков:

disc  (• • •) 
circle  (○ ○ ○) 
square  (▪ ▪ ▪) 
decimal  (1 2 3) 
decimal-leading-zero (01, 02, 03) 
lower-roman (i ii iii) 
upper-roman (I II III) 
lower-greek (α β γ) 
lower-latin (a b c) 
upper-latin (A B C) 
armenian (Ա Բ Գ) 
georgian (ა ბ გ) 
lower-alpha (a b c) 
upper-alpha (A B C) 

Для дальнейшего уточнения:

0

Посмотрите этот пример вы можете использовать несколько Ли в ул

<ul> 
    <li>first item</li> 
    <li>second item  <!-- Look, the closing </li> tag is not placed here! --> 
    <ul> 
     <li>second item first subitem</li> 
     <li>second item second subitem  <!-- Same for the second nested unordered list! --> 
     <ul> 
      <li>second item second subitem first sub-subitem</li> 
      <li>second item second subitem second sub-subitem</li> 
      <li>second item second subitem third sub-subitem</li> 
     </ul> 
     </li>   <!-- Closing </li> tag for the li that contains the third unordered list --> 
     <li>second item third subitem</li> 
    </ul> 
    </li>    <!-- Here is the closing </li> tag --> 
    <li>third item</li> 
</ul> 
Смежные вопросы