CSS list-style-type not working

R

7

28

I have set the list-style-type in CSS, but for some reason it's not showing it.

body {
  margin: 0;
}
ol {
  list-style-type: decimal;
  padding-left: 0;
}

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

Referendum answered 16/9, 2012 at 14:19 Comment(1)

Check your margin and padding... – Originate 16/9, 2012 at 14:22

Y

86

Because of your padding reset, the numbers are actually off to the left of the page. Try adding:

list-style-position: inside;

Yount answered 16/9, 2012 at 14:23 Comment(0)

A

34

display:list-item;
list-style-position:outside;

It may give problem if list display: attribute is set to some thing else than display:list-item;

Absorbed answered 28/4, 2015 at 10:41 Comment(0)

M

6

Decimal is default for an "ol". No need to declare it. Also the numbers are there just falling off the side of the page i.e. invisible. Adjust your padding and get rid of the redundant declaration. See here

Meteoroid answered 16/9, 2012 at 14:27 Comment(3)

Thank you for the advice. I always thought some browsers use different styles, and the ol style type may vary, that's the reason why I put it there. – Referendum 16/9, 2012 at 14:30

from w3c "Ordered and unordered lists are rendered in an identical manner except that visual user agents number ordered list items. User agents may present those numbers in a variety of ways. Unordered list items are not numbered." – Meteoroid 16/9, 2012 at 14:37

If he happens to be using a CSS reset file beforehand, the ol may be set to a different value – Jeth 4/11, 2013 at 4:26

R

4

If nothing of this work, make sure you don't have elements explicitly marked as display block inside the LI. It just happened to me with a H4 A set as block inside the LI. I was about to resign 😳

Regime answered 5/2, 2017 at 0:33 Comment(0)

Z

3

In my case it wasn't working with <ul>.

I suspected it was possibly because of a CSS reset file I was using.

I set the ul { display:list-item; } as suggested above, and it just worked fine.

Check if you are using any reset files. They could be tricky at times.

Zenithal answered 8/5, 2020 at 11:7 Comment(1)

Try this with list-style-position: inside; & list-style-type: disc; – Bloodstain 16/4, 2021 at 4:14

B

2

just remove "display : block;" from your li element

Binal answered 19/2, 2016 at 9:49 Comment(0)

C

0

Changing properties of <li> instead of <ol> worked for me.

ol > li {
  padding: 0;
  display:list-item;
  list-style-type: 'disc';
}

Cothran answered 9/1, 2023 at 12:12 Comment(0)

Recommended topics

Hot tags