html - 相对于有序列表编号对齐列表项

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

检查这个小提琴

添加了 position: relativeto <li>，对 h4absolute进行了一些边距调整，使 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如果您希望行更接近，请减少。