Ordered List (ol) showing up un-numbered?_问答_开发者

I have an ordered list (ol) on my page but the numbering is not showing up at all! I have done this:

<ol>
<li>my text</li>
<li>my text</li>
<li>my text</li>
</ol>

As I have typed the above, sta开发者_如何学Gockoverflow was able to render it correctly the way I wanted it to, like so:

my text

my text

my text

However, this is not happening on my webpage. I am viewing this in Firefox on my localhost.

If any knows why my ol's look like ul's (i.e. no numbering) I would be grateful for help. If not, please let me know how I can achieve a numbered list using ul's.

Thanks all

It's going to be a CSS issue. CSS can change the numbering/bullet style, and even turn it off altogether. Using Firebug, inspect the element and look at the CSS styles on the right to see what styles are being applied to it. Look for one called list-style.

While the list-style-type is most likely the problem, especially if you've used a reset stylesheet, you might also make sure that the margin-left/padding-left of the list is large enough that the numbers can fit into the space.

Also, it might be worth adding list-style-position: inside; just to see if the numbers are being generated/applied by the browser.

Very weird situation, the numbers and bullets for my ol and ul display in Adobe Dreamweaver CS6. They did not display in any type of browser. The website is wrapped with a that has a display:block for the entire website. I had to enter the below CSS to get the numbers and bullets to display.

li {
  display: list-item;
  list-style-position: inside;
}

Try list-style-type: decimal; in your CSS for the ol.

Here's some more values you can use.

If you are using a reset stylesheet, you can enable numbering via css.

ol li {
    list-style: decimal;
    list-style-position: inside;
}

Ok, I had the same problem and all I did is set in the LI definition 'display: list-item;'. This had been overriden to 'display: block;' elsewhere.

I also changed list-style-position from inside to outside so that it'd be in the format I wanted.

Recently I had the same issue in Firefox 6.

This css code prevented the numbers from showing up:

ol li {
  display:block;
}

Removing "display:block" revealed them!

Bootstrap seems to have this default style:

ul, menu, dir {
    display: block;
    list-style-type: disc;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;
}

You should override this to remove display: block and move the position to inside:

ol {
    list-style-type: decimal;
    list-style-position: inside;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 0px;
}

If you use:

*{
padding: 0;
}

Turn it off! In my case it was a problem.

Make sure the li has display: list-item;

It's really easy for list items to inherit display block from somewhere which will remove the numbers or bullets

Thanks man Really appreciate for this answer I add wrong tag in CSS file, now working fine error due to wrong css tags. My Website tendtoread.com If you still face any problem you can inspect element and add this code below. I m using wordpress version.

.entry ol ul li, .entry ol li {
    list-style: decimal;
    font-family: initial;
    color: #000000;
}

Style family must be in decimal form.

I just had the same issue, turns out I simply hadn't closed a <div> Hope this helps someone else!

I've just had this issue. Very strange.

If I disable:

ol li {overflow: hidden;}

the numbers pop up.

Otherwise they all sit showing 0 as their number.

Possibly another possible in answer:

removing padding can fix the numbers not showing up.This worked for me in Chrome, not sure if it is the same in other browsers

In my case display:inline was overriding the display of the numbers. Perhaps there was an assumption when writing the CSS spec that nobody would want to number items in text that flows like a paragraph. But in the "legal fine print" kind of text I was styling this kind of numbering was exactly what I needed.

The solution was to float:left on the li

ol {
    list-style-type: decimal;
}
ol li {
    display: list-item;
    list-style-position: inside;
    padding-left: 4px;
    float:left;
}

The padding-left is optional, but it counter-balances the space on the right of the number.

Found the float solution here.

I had set "overflow: hidden" in root html, which was resulting in disappearance of numbering of list items. I too had "li" nested in "ol". Following setting worked (I was using sass):

ol {
    overflow: visible;
}
    li {
        overflow: visible;
    }
}

A margin/padding reset can also cause numbers to not display. The <li> elements inside <ol> are a bit indented to the right. This is mimicked via padding natively, which gets reset by the margin/padding reset.

On your <ol> element, give padding: revert style, which will revert the padding to the original value, as intended for <ol> elements.