如何對齊2個並排Div的基線？

這是my blog的頁面。
我創建了一個灰色框，標題爲日記條目。如何對齊2個並排Div的基線？

點1行文對於記錄...
正如你可以看到，該文本從字開始爲略低於數的水平。
與第2點相同。

請提出我應該對代碼做些什麼改變。

我的代碼：

<div style="background-color: #F0F0F0; display: table-cell; vertical-align: middle; border-radius: 15px;"> 
    <div style="margin-left: 10px; margin-right: 100px; margin-top: 15px; margin-bottom: 15px;"> 


     <div style="text-align: center;"><span style="font-family: georgia; font-size: 17px; font-weight: bold;">Journal entries</span></div> 

     <br> 


     <div style="font-family: serif; font-size: 17px; margin-left: 30px;"> 

      <div style="float: left;">1.&nbsp;</div> 
      <div>For recording 1<sup>st</sup> aspect, asset value is reduced period-wise by crediting its account:</div> 
      <div style="margin-left: 20px;">Depreciation A/c&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...Dr. 
       <br> 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;To Asset A/c</div> 

      <br> 

      <div style="float: left;">2.&nbsp;</div> 
      <div>For recording 2<sup>nd</sup> aspect, the depreciation for the period is transferred to the Profit &amp; Loss Account:</div> 
      <div style="margin-left: 20px;">Profit and Loss A/c&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...Dr. 
       <br> 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;To Depreciation A/c</div> 

     </div> 


    </div> 
</div>

來源

2013-10-28 rohitmakkar

根據您的評論，您不希望文字低於數字。一種選擇是將數字放在文本div內，然後將其完全放在角落。然後有點填充添加到div的文字：以上

<div class="text"> 
    <div class="num"> 
     1. 
    </div> 

    stuff 
</div>

.text{ 
    position: relative; 
    padding-left: 20px; 
} 

.num{ 
    position: absolute; 
    width: 20px; 
    top: 0; 
    left: 0; 
}

http://jsfiddle.net/THYga/1/

來源

2013-10-28 15:02:41

感謝詹姆斯和綠動，但我不希望文本來下面的數字。所以，左邊的數字和右邊的文本應該在2個不同的層次上，不要混雜在一起。 – rohitmakkar

@rohitmakkar你的問題還不清楚。答案已更新。 –

使用SPAN，而不是DIV元素。如果您無法更改html，請使用CSS將display: inline分配給那些DIV元素。也不要將float: left用於編號元素。

來源

2013-10-28 15:01:14

如何對齊2個並排Div的基線？

回答

相關問題