CODEWITHSUNDEEP
htmlcsshtml-lists
SeinopSys
SeinopSys

Reputation: 8937

CSS list-style-type not working

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>

Upvotes: 29

Views: 72819

Answers (7)

Mahesh Ghamaand
Mahesh Ghamaand

Reputation: 515

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

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

Upvotes: 0

ellelle
ellelle

Reputation: 31

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.

Upvotes: 3

Loreena
Loreena

Reputation: 141

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 😳

Upvotes: 4

Anurag
Anurag

Reputation: 743

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

Upvotes: 2

Musaddiq Khan
Musaddiq Khan

Reputation: 1937

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;

Upvotes: 34

noel
noel

Reputation: 2339

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

Upvotes: 6

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324650

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

list-style-position: inside;

Upvotes: 88

Related Questions