li not displaying inside a ol

You posted a link to a page that hasn’t been published, or else the address is bad, so I can’t see what’s on it.

https://ananiamedia.com/test/

I don’t know why the theme developer did this, but he/she added the following rule to the CSS file:

ol li {
   display: inline-block;
}

This rule is making all of the list items for an ordered list appear on a single line. This rule, in my opinion, is overly broad. There are many instances in which list items are made inline (in menus, for example), but in those cases, a class selector should be used so the rule doesn’t affect every single use of ordered lists by default.

So, what you can do is add this CSS rule:

ol li {
   display: block;
}

You shouldn’t edit the theme’s stylesheet directly (unless it’s a custom theme made for your site), but use a CSS plugin like Custom CSS Manager.

But the numbers still aren’t displaying ??

I’m not sure exactly why, but explicitly setting display: block on an <li> element suppresses the list-style property on the container <ol> element. So instead of using display: block, you should delete the line entirely and leave it blank:

ol li {}

it is still not working ??

Hmm, actually it’s supposed to be list-item, but that doesn’t seem to work either:

ol li {
   display: list-item;
}

It looks like the numbers are there, but they’re sitting off-window. Try something like this:

.entry-content ol {
    margin-left: 3em;
}

That will move the list to the right a bit, without affecting any other lists on the page. You can replace the 3em with any other measurement and see if you like the way it looks.

Good pull. I wonder what’s the underlying rule, though, that’s shifting the content to the left? I couldn’t seem to find it in the CSS.

Thank you!

@crouchingbruin: From what I’ve read, by default list bullets exist outside the content flow. In this case, the containing element contained no left margin and the list itself only contained a left margin of 0.5em. Because the bullets technically aren’t part of the <li> element, they appear off-window. Setting list-style-position: inside makes the bullets part of the <li> element, meaning that they appear correctly.

Here’s a Fiddle that shows the difference: https://jsfiddle.net/9H2xK/

Ah, OK, thanks for the explanation. So the rule for ol needs to be changed to:

ol {
   list-style: decimal inside;
}