Question

Here is a fiddle of my code: http://jsfiddle.net/ZWQpb/

Here is the HTML:

<div class="blog-entry">
            <ol>
                <li><h4 class="title"><a href="">10 moments in cinematic history changing thus</a></h4></li>

                <li><h4 class="title"><a href="">Testing this theme with image</a></h4></li>

                <li><h4 class="title"><a href="">More experimental things and more</a></h4></li>

                <li><h4 class="title"><a href="">The video that defined a new definition</a></h4></li>

                </ol>
</div>

And the CSS:

body {
    padding: 50px;
}

.blog-entry {
    padding-left: 32px;
    position: relative;
    width: 248px;
}
.blog-entry ol {
    color: #999999;
    font: italic 3em Arial,sans-serif;
    list-style-type: decimal;
}
.blog-entry h4.title {
    color: #48423F;
    font-family: Arial,sans-serif;
    font-size: 16px;
    padding-left: 25px;
    padding-right: 33px;
    text-shadow: none;
}

I want each list item to align from the top part of the number. Look at this picture as an example:

How can I do this? Feel free to update the fiddle: http://jsfiddle.net/ZWQpb/

Answer 1

Only solution i found is, both the font-size of the li and h4 class should be the same.

Check here the other one http://jsfiddle.net/ZWQpb/12/