對齊相對有序列表號

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

唯一的解決方案，我發現是，這兩個字體大小的李和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，如果你想行砥更多接近。