Geek asks and answers

Missing OL digits

This will seem like a silly question and is the main html, but I will ask it anyway. I saw several posts that ask this similar question and this does not help to fix my problem. I am testing my local server for testing. I have this for my syntax.

<div id="top5">

            <img src="images/top5.png" alt="Top 5 Rankings" />

            <ol>
                <li class="top5rankings"><a href="roster/kidwonder.php">Kid Wonder</a></li>
                <li class="top5rankings"><a href="roster/kidwonder.php">Kid Wonder</a></li>
                <li class="top5rankings"><a href="roster/kidwonder.php">Kid Wonder</a></li>
                <li class="top5rankings"><a href="roster/kidwonder.php">Kid Wonder</a></li>
                <li class="top5rankings"><a href="roster/kidwonder.php">Kid Wonder</a></li>
            </ol>

        </div>

However, it does not put numbers for an ordered list and just sees if anyone can see my problem. This is what I applied to the displayed page in my css:

li.top5rankings {
color: red;
display: block;
text-align: center;
}

styles.css (line 103)

* {
    margin: 0;
    padding: 0;
    }

styles.css (line 4) Inherited from ol

ol {
    list-style-position: inside;
    list-style-type: decimal;
}
+3
source share
2 answers

Try removing display: block;so your css becomes the same:

li.top5rankings {
  color: red;
  text-align: center;
}
+4
source

- css- reset, , list-style-type margin 0. :

ol {
    margin-left: 2em;
}

ol li {
    list-style-type: decimal-leading-zero;
    list-style-position: outside;
}

JS Fiddle demo

, @Fredrik , display . list-elements :

display: list-item;

+7

More articles:


All Articles