ContextQMD
Back to Serenity

Lists Tests

Base/res/html/misc/lists.html

latest3.7 KB
Original Source

Lists Tests

ul

default

  • Entry one
  • Another entry

Multiple levels

  • First
  • Second

    • Sub-1

    • Sub-2

      • Sub-sub-1
      • Sub-sub-2
      • Sub-sub-3

    • Sub-3

Multiple levels of numbers

  1. First

  2. Second

  3. Sub-1

  4. Sub-2 1. Sub-sub-1 2. Sub-sub-2 3. Sub-sub-3

  5. Sub-3

list-style: disc

  • Entry one
  • Another entry

list-style: square

  • Entry one
  • Another entry

list-style: circle

  • Entry one
  • Another entry

list-style: linear-gradient(to top left, red, green)

  • Entry one
  • Another entry

list-style: inside url(list-item.png)

  • Entry one
  • Another entry

list-style: outside url(list-item.png)

  • Entry one
  • Another entry

list-style: outside url(90s-bg.png)

  • Entry one
  • Another entry

list-style: outside url(data:image/png)

  • Entry one
  • Another entry

ol

default

  1. First
  2. Second
  3. Third

with start offset

  1. Item 20
  2. Item 21
  3. Item 22

with different order

  1. Item 1
  2. Item 5
  3. Item 2
  4. Item 3

list-style: decimal

  1. First
  2. Second
  3. Third

list-style: decimal-leading-zero

  1. First
  2. Second
  3. Third
  4. Another Entry
  5. Another Entry
  6. Another Entry
  7. Another Entry
  8. Another Entry
  9. Another Entry
  10. Another Entry

list-style: lower-alpha

  1. First
  2. Second
  3. Third
  4. Another Entry
  5. Another Entry
  6. Another Entry
  7. Another Entry
  8. Another Entry
  9. Another Entry
  10. Another Entry
  11. Another Entry
  12. Another Entry
  13. Another Entry
  14. Another Entry
  15. Another Entry
  16. Another Entry
  17. Another Entry
  18. Another Entry
  19. Another Entry
  20. Another Entry
  21. Another Entry
  22. Another Entry
  23. Another Entry
  24. Another Entry
  25. Another Entry
  26. Another Entry
  27. Another Entry
  28. Another Entry
  29. Another Entry
  30. Another Entry

list-style: upper-alpha

  1. First
  2. Second
  3. Third
  4. Another Entry
  5. Another Entry
  6. Another Entry
  7. Another Entry
  8. Another Entry
  9. Another Entry
  10. Another Entry
  11. Another Entry
  12. Another Entry
  13. Another Entry
  14. Another Entry
  15. Another Entry
  16. Another Entry
  17. Another Entry
  18. Another Entry
  19. Another Entry
  20. Another Entry
  21. Another Entry
  22. Another Entry
  23. Another Entry
  24. Another Entry
  25. Another Entry
  26. Another Entry
  27. Another Entry
  28. Another Entry
  29. Another Entry
  30. Another Entry

list-style: upper-roman

  1. First
  2. Second
  3. Third
  4. Another Entry
  5. Another Entry
  6. Another Entry
  7. Another Entry
  8. Another Entry
  9. Another Entry
  10. Another Entry
  11. Another Entry
  12. Another Entry
  13. Another Entry
  14. Another Entry
  15. Another Entry
  16. Another Entry
  17. Another Entry
  18. Another Entry
  19. Another Entry

list-style: lower-roman

  1. First
  2. Second
  3. Third
  4. Another Entry
  5. Another Entry
  6. Another Entry
  7. Another Entry
  8. Another Entry
  9. Another Entry
  10. Another Entry
  11. Another Entry
  12. Another Entry
  13. Another Entry
  14. Another Entry
  15. Another Entry
  16. Another Entry
  17. Another Entry
  18. Another Entry
  19. Another Entry

list-style: outside lower-roman url(list-file.png)

  1. First
  2. Second
  3. Third
  4. Another Entry
  5. Another Entry
  6. Another Entry
  7. Another Entry
  8. Another Entry
  9. Another Entry
  10. Another Entry
  11. Another Entry
  12. Another Entry
  13. Another Entry
  14. Another Entry
  15. Another Entry
  16. Another Entry
  17. Another Entry
  18. Another Entry
  19. Another Entry

'none' values

list-style: none

  • Entry one
  • Another entry

list-style: none square

  • Entry one
  • Another entry

list-style: square none

  • Entry one
  • Another entry

list-style: url(list-item.png) none

  • Entry one
  • Another entry

list-style: none none

  • Entry one
  • Another entry

list-style: inside none none

  • Entry one
  • Another entry

list-style: square none none (error)

  • Entry one
  • Another entry

list-style: none none none (is an error)

  • Entry one
  • Another entry