html css ol vertical - html

Question

I have written a piece of code:
<p>
Example:
</p>
<ol>
<li>Text 1</li>
<li>Text 2</li>
</ol>
This need to set my text vertical under each other
But it gives me the output that my text is written over each other so not vertical under each other but just on one line.
I need it like this:
<p>
Example:
</p>
<ol>
<li>Text 1</li>
<li>Text 2</li>
</ol>
And now it is like this:

Answer 1

This could have been a comment. But I thought I could guide you and explain more.
The question contains only the HTML Markup, where the issue doesn't occur. It is perfectly fine. The issue lies with the CSS, which is the presentational style. So, it is something to do with the CSS.
What I feel from your screenshot is, there might be a CSS with a rule:
* {line-height: 0;}
This might have been given as a mistake, or because of something, it is getting over-ridden. You need to reset these values by either:
Using a CSS Reset - Eric Meyer, Simple Reset, or YUI Reset.
If it is a Simple Reset, you can just give this rule:
* {margin: 0; padding: 0; line-height: 1.2em;}
The line-height is for your particular case.
And make sure, you put your custom CSS at the end, so that it is effective and over-rides all the other styles.
Hope you get it done.

Answer 2

try using:
li {
float: none;
dispaly: block;
clear: both;
}