将列表项与有序列表编号对齐

Question

以下是我的代码的小提琴：http://jsfiddle.net/ZWQpb/

这是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>

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;
}

我希望每个列表项从数字的顶部对齐。以此图片为例：

我该怎么做？随意更新小提琴：http://jsfiddle.net/ZWQpb/

Answer 1

我发现只有解决方案是，li和h4类的字体大小应该相同。

在这里查看另一个http://jsfiddle.net/ZWQpb/12/

Answer 2

这样的东西？

.title {
    float:right;
    margin-top:10px;
}

http://jsfiddle.net/ZWQpb/11/

Answer 3

检查此fiddle

将位置relative添加到<li>，将h4 absolute调整为h4

.blog-entry ol li{
    position: relative;
    margin-top: -12px;
}

.blog-entry h4.title {
    position: absolute;
    top: 5px;
    color: #48423F;
    font-family: Arial,sans-serif;
    font-size: 16px;
    padding-left: 25px;
    padding-right: 33px;
    text-shadow: none;
    vertical-algin: bottom;
}

如果您希望行更接近，请

减少margin-top。